Question

我正在尝试使用HTML postMessage功能吗？

我找到了一些网站给出了这个例子，但出于某种原因让人苦苦挣扎。

下面显示了2页的代码，任何帮助都会被提供。

谢谢和问候，莱恩

test.php的

<iframe src="postmessage-target.html" id="iframe"></iframe>
 <form id="form">
   <input type="text" id="msg" value="Message to send"/>
   <input type="submit"/>
 </form>
 <script>
 window.onload = function(){
         var win = document.getElementById("iframe").contentWindow;
         document.getElementById("form").onsubmit = function(e){
                 win.postMessage( document.getElementById("msg").value );
                 e.preventDefault();
         };
 };
 </script>

PostMessage的-target.html上

<div id="test">Send me a message!</div>
 <script>
 document.addEventListener("message", function(e){
         document.getElementById("test").textContent =
                 e.domain + " said: " + e.data;
 }, false);
 </script>

提前再次感谢。

赖安

更新

根据用户建议，这是否正确？

的test.html

<iframe src="postmessage-target.html" id="iframe"></iframe>
 <form id="form">
   <input type="text" id="msg" value="Message to send"/>
   <input type="submit"/>
 </form>
 <script>
 window.onload = function(){
         var win = document.getElementById("iframe").contentWindow;
         document.getElementById("form").onsubmit = function(e){
                 win.postMessage( document.getElementById("msg").value, "*"); 
                 e.preventDefault();
         };
 };
 </script>

PostMessage的-target.html上

<div id="test">Send me a message!</div>
 <script>
 document.addEventListener("message", function(e){
 document.getElementById("test").innerHTML = e.origin + " said: " + e.data;
 }, false);
 </script>

Answer 1

规范指定您应该将targetOrigin提供给postMessage函数：

 win.postMessage( document.getElementById("msg").value, "*");

我认为没有e.domain。在侦听器中尝试e.origin：

 document.getElementById("test").innerHTML = e.origin + " said: " + e.data;

（我也用innerHTML替换了非标准textContent）

Answer 2

为了使这个工作，我最终不得不将document.addEventListener更改为window.addEventListener-我认为你正在以这种方式将接收代码添加到传输文档而不是iframe。

HTML 5 postMessage（相同域名）

2 个答案: