子供から親のiframeへメッセージを送信

まあ、私は簡単な作業をしようとしています。親ウィンドウからiframeへ、iframeから親へのメッセージの送信子供から親のiframeへメッセージを送信

index.js（親）

window.onload = function() { 
    //Get Audio node 
    let audio = document.getElementsByTagName('audio')[0]; 

    //Get iframe node 
    let iframe = document.getElementsByTagName('iframe')[0]; 

    iframe.contentWindow.postMessage('Parent To Child', '*'); 
    window.addEventListener('message', messagesHandler); 
} 

function messagesHandler(ev) { 
    console.log(ev.data); 
}

menu.js

window.onload = function() { 
    window.parent.postMessage('Child to parent', '*'); 
    window.addEventListener('message', messagesHandler); 
} 

function messagesHandler(ev) { 
    console.log(ev.data); 
}

私は親から子へメッセージを送信することができますが周りにいない他の方法です。手がかりは何ですか？

出典

2017-04-11 Goamaral

親ロードハンドラはiframeロードハンドラの後に呼び出されます。これにより、子フレームから送信されたpostMessageは処理されません。 MDN docsから

：

文書のロードプロセスの終了時に負荷イベントが発生します。この時点では、ドキュメント内のすべてのオブジェクトがDOM内にあり、の画像、スクリプト、リンクおよびサブフレームの読み込みが完了しましたです。

リスナーが既に登録されていることを確認するときには、postMessageを実行する必要があります。親リロードイベントの前に子リスナーが利用可能であることはわかっていますが、一般的な方法で実装し、この順序に依存しないようにすることは良い習慣であるため、同じフレームワークコードを使用できます親フレームまたは子フレーム。

状況によっては、トリガーに失敗する可能性があるため、ウィンドウロードイベントでは何もしないことをお勧めします。より良い選択はDOMContentLoadedです。

出典

2017-04-11 15:31:18

<!DOCTYPE html> 
<html> 
    <body> 
    <div id="test"></div> 

    <script> 
     window.onmessage = function(e){ 
      if (e.data == '001:hello') alert('Hello from iframe'); 
     }; 

     var insideIframe = function() { 
      window.onload = function() { 
       console.log('onLoad'); 
      }; 
      window.callPapa = function() { 
       window.top.postMessage('001:hello', '*'); 
      }; 
      window.onmessage = function(e) { 
       if (e.data == "hello") { 
        document.body.innerHTML += "<div>Hello from parent</div>" 
       } 
      }; 
     } 

     var fnToStr = insideIframe.toString().replace(/\s+/g, ' '); 
     var FnBody = fnToStr.substring(fnToStr.indexOf("{") + 1, fnToStr.lastIndexOf("}")); 

     // Test 
     var mediaData = '<html><body><div><button onclick="callPapa()">Click me</button></div>'; 
     mediaData += '<script>' + FnBody + '<\/script></body></html>'; 

     var iframe = document.createElement('iframe'); 
     iframe.setAttribute('marginwidth','0'); 
     iframe.setAttribute('marginheight','0'); 
     iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(mediaData); 

     // PASTE THE IFRAME INSIDE WHATEVER RANDOM DIV 
     document.body.appendChild(iframe); 
    </script> 

    </body> 
</html>

出典

2017-04-11 15:15:44 ayxos

子供から親のiframeへメッセージを送信

答えて

関連する問題