Menu
I have two HTML files. In one HTML file I'm posting a message using postMessage in HTML5. How can I get the posted message in another HTML files on load?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
//post message
var iframeWin = document.getElementById("iframe_id").contentWindow;
iframeWin.postMessage("helloooo");
});
</script>
<title>IFrame Example</title>
</head>
<body>
<input id="myInput" type="hidden" value="IDDUSER">
<iframe name="iframe" id="iframe_id" src="Two.html" height="150"></iframe>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
//Get posted message here
});
</script>
<title>IFrame Child Example</title>
</head>
<body>
<p id="received-message">I've heard nothing yet</p>
<h1>Iframe</h1>
</body>
</html>
471
HTML5 postMessage() API method has syntax as below:
userWindow.postmessage(myMessage, targetOrigin);
this will post myMessage to the window pointed by userWindow, which has targetOrigin as it's URI. If the userWindow reference matches but targetOrigin does not match with it's URI then the message will not get posted.
In the target window i.e. userWindow you can listen to the message event.
window.addEventListener('message', handlerFunction, captureBubble);
For example if you have a window reference in myWindow variable, then on source...
Call
myWindow.postMessage('this is a message', 'http://www.otherdomain.com/');
Callback handling
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
if (event.origin !== 'http://www.otherdomain.com/')
return;
// this check is neccessary
// because the `message` handler accepts messages from any URI
console.log('received response: ',event.data);
}
and on target...
Message handler
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
if (event.origin !== 'http://www.callingdomain.com/')
return;
console.log('received message: ',event.data);
event.source.postMessage('this is response.',event.origin);
}
postMessage API Reference - MDN
A nice tutorial
119
You have to listen for the message event on the window object in the child iframe. Also, postMessage takes 2 parameters, message & domain.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#clickMe').click(function() {
//post message
var iframeWin = document.getElementById("iframe_id").contentWindow;
iframeWin.postMessage("helloooo","*");
});
});
</script>
<title>IFrame Example</title>
</head>
<body>
<input id="myInput" type="hidden" value="IDDUSER">
<button id="clickMe">Click Me</button>
<iframe name="iframe" id="iframe_id" src="Two.html" height="150"></iframe>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$(window).on('message', function(evt) {
$('#received-message').html(evt.originalEvent.data);
});
});
</script>
<title>IFrame Child Example</title>
</head>
<body>
<p id="received-message">I've heard nothing yet</p>
<h1>Iframe</h1>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
