0

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>
4

2 に答える 2

2

標準では、targetOrigin を postMessage 関数に提供する必要があると指定されています。

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

はないと思いますe.domain。e.originリスナーで試してください：

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

(非標準の textContent も innerHTML に置き換えました)

于 2012-06-08T17:22:28.583 に答える
0

これを機能させるには、document.addEventListener を window.addEventListener に変更する必要がありました。そのようにすると、iframe ではなく送信ドキュメントに受信コードを追加していると思います。

于 2013-08-20T13:23:57.650 に答える