admin管理员组文章数量:1279120
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?
One.html
<html>
<head>
<script src=".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>
Two.html
<html>
<head>
<script src=".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>
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?
One.html
<html>
<head>
<script src="http://code.jquery./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>
Two.html
<html>
<head>
<script src="http://code.jquery./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>
3 Answers
Reset to default 6HTML5 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./');
Callback handling
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
if (event.origin !== 'http://www.otherdomain./')
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./')
return;
console.log('received message: ',event.data);
event.source.postMessage('this is response.',event.origin);
}
postMessage API Reference - MDN
A nice tutorial
You have to listen for the message event on the window object in the child iframe. Also, postMessage takes 2 parameters, message & domain.
One.html
<html>
<head>
<script src="http://code.jquery./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>
Two.html
<html>
<head>
<script src="http://code.jquery./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>
You can use localStorage of HTML5 like
localStorage.setItem("msgvariable", message);
and retrieve it on another html page as
var retrivedMsg = localStorage.getItem("msgvariable");
Check out the implementation HERE
本文标签： javascriptHow to retrieve data posted using postMessage of HTML5Stack Overflow
版权声明：本文标题：javascript - How to retrieve data posted using postMessage of HTML5? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741300109a2371045.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论