I'm trying to pass the message from comn.html window to comm.html window, but it doesn't pass
please tell me whether the code is correct or not. If not, kindly provide the exact code for that.
I want the code for passing message between windows not between iframes.
Code of comn.html:
<html>
<head>
<script>
window.onload = function()
{
var btn = document.getElementById('send');
btn.addEventListener('click', function sendMessage(e)
{
var string="Hi Adaptavant";
var new_win=window.open('comm.html');
new_win.postMessage(string,"*");
});
}
</script>
</head>
<body>
<button id="send" >Send Message</button>
</body>
</html>
Code of comm.html:
<html>
<head>
<title>postMessage</title>
<script type=text/javascript>
window.onload = function()
{
var msg = document.getElementById('message');
window.addEventListener("message",function receiveMessage(e) {
msg.innerHTML="msg received= " +e.data;
document.write("the message is " +msg);
}
</script>
</head>
<body>
<div id="message"></div>
</body>
</html>
If I run this program, my message isn't posting in another window.
What's the problem?
replace your script with this:
window.onload = function()
{
var msg = document.getElementById('message');
window.addEventListener('message', function(e) {
var message = e.data;
msg.innerHTML="msg received= " +e.data;
});
}
Let me know if it worked!
Related
When I click the "click now" button nothing happens, I want it to open in a new tab. Code:
<button onclick="myFunction()">click to play</button>
<script>
var urlObj = new window.URL(window.location.href);
var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";
if (url) {
var win;
document.querySelector('button').onclick = function()
I've tried rewriting it like this:
<html>
<body>
<button onclick="myFunction()">click to play</button>
<script>
function myFunction() {
var win = window.open(
"https://incognito42.herokuapp.com/src/gs/public/vex5/",
"DescriptiveWindowName",
"width=1920,height=1080,resizable,scrollbars=no,status=1"
);
myWindow.document.write('<html><head> <title>Sample</title><link rel="stylesheet" type="text/css" href="css/newsCSSWindow.css"></head><body>');
myWindow.document.write("Sample Window");
myWindow.document.write('</body></html>');
}
</script>
</body>
</html>
but then it doesn't open in a new tab with the URL shown as "about:blank", and just to be clear I want the URL bar to say "about:blank", but it displaying the link's contents shown on the page.
this page for reference
You can't.
While you could fix your trivial errors:
The URL you entered as the first argument to window.open isn't about:blank
You forgot the , after that first argument
You have var win and then myWindow.document.write
… the browser will change the displayed URL to reflect where the data from.
Browsers do not let webpages deceive users about the source of what they are looking at.
I suspect that you meant it if you do not write in the comment exactly what
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="myFunction()">click to play</button>
<script>
function myFunction(){
var urlObj = new window.URL(window.location.href);
var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";
if (url) {
var win;
document.querySelector('button').onclick = window.open(url)}
}
</script>
</body>
</html>
Edited version
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="myFunction()">click to play</button>
<script>
var urlObj = new window.URL(window.location.href);
var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";
if (url) {
var win;
document.querySelector('button').onclick = function() {
if (win) {
win.focus();
}
else {
win = window.open();
win.document.body.style.margin = '0'; //Set margin new blank window
win.document.body.style.height = '100vh'; //Set height new blank window
var iframe = win.document.createElement('iframe'); //Creates a frame for the game
iframe.style.border = 'none';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.margin = '0';
iframe.src = url;
win.document.body.appendChild(iframe); //add a frame to the window
}
};
}
</script>
</body>
</html>
Here is my calling html code
<!DOCTYPE html>
<html>
<head>
<title>Display Card Type</title>
</head>
<script src='Card.js'; ></script>
<body>
<script>
var card = new myCardType();
var value = new myCardType();
card.setCard('I am a club');
value.setFace('I am an Ace');
card.showSuit();
value.showFace();
</script>
</body>
</html>
And here is the separate function (saved in same folder).
function myCardType(){
this.suit = suit;
this.showSuit = function(){
alert(this.suit);
}
this.face = value;
this.showFace = function() {
alert(this.face);
}
this.setCard = function (newSuit) {
this.suit = newSuit;
}
this.setFace = function (newValue) {
this.face = newValue;
}
}
Spent ages reviewing this but just cannot see what is going on, grateful for any clues.
I want to render 4k high res images using html2canvas but it not render.
please advise.
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
<div id="html-content-holder">
<img
width="400" height="auto"src="https://www.wallpaperup.com/uploads/wallpapers/2016/06/24/991808/9ab236cccae5470451c20329ca43ec6b-1000.jpg">
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<br/>
<h3>Preview :</h3>
<div id="previewImage">
</div>
preview not working please advise.
thank you
there is a problem when I'm trying to view a json file in a consloe(chrome developers tools) it says uncaught type error request.onload is not a function, but I can't find where is the problem
can anybody help
thanks in advace
<html>
<head>
<title>ajax php</title>
<!--<link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<header>
<h1> json and ajax</h1>
<button id="btn">fet info from JSON file</button>
</header>
<div id="animal-info"></div>
<script src="main.js"></script>
</body>
</html>
<!--this code is in a seperate file main,js-->
enter code here
var request = new XMLHttpRequest();
request.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
request.onload() = function() {
var data = request.responseText;
console.log(request.responseText);
};
request.send();
You are calling onload(), which isn't set yet. You should be setting it
request.onload = function() {
var data = request.responseText;
console.log(request.responseText);
};
request.onload() is being called as a function in your code.
Use the below code
request.onload = function(){
//do something here
}
I tried running an application with knockoutjs script included with jquery and my own js file that has a ViewModel actual binding to the controls.
I am getting the exception every time i run the application.
Is this the issue in my system, or the Visual Studio? I even tried running the html file alone in the browser, i couldn't see any exceptions but it stopped me from performing all other functionalists that are expected to be done from knockoutjs.
Please help me in this regard
This is my full code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/knockout-2.2.0.js"></script>
<script type="text/javascript"> // Here's my data model
debugger;
function viewModel() {
this.day = ko.observable('24');
this.month = ko.observable('02');
this.year = ko.observable('2012');
this.fullDate = ko.computed(function () {
return this.day() + "/" + this.month() + "/" + this.year();
}, this);
};
ko.applyBindings(new viewModel());
</script>
</head>
<body>
<p>Day:
<input data-bind="value: day" /></p>
<p>Month:
<input data-bind="value: month" /></p>
<p>Year:
<input data-bind="value: year" /></p>
<p>The current date is <span data-bind="text: fullDate"></span></p>
</body>
</html>
You called applyBindings before browser rendered html. You have to move script tag to the bottom of the page or put your code to document ready handler:
<script type="text/javascript">
$(function(){
debugger;
function viewModel() {
this.day = ko.observable('24');
this.month = ko.observable('02');
this.year = ko.observable('2012');
this.fullDate = ko.computed(function () {
return this.day() + "/" + this.month() + "/" + this.year();
}, this);
};
ko.applyBindings(new viewModel());
});
</script>