Iframeから親文書へのカスタムイベントのトリガー

Question

iframe内のカスタムイベントを発生させ、親ドキュメントから検出するのに問題があります。 iframeと親文書のソースが同じです（同じプロトコル、同じホスト、同じポート）。

アドバイスはありますか？

Answer 1

これは動作します：

parent.$('body').trigger('eventName'); 

のiframe内のトリガーイベントが親ドキュメント内で検出されます。

Answer 2

私は同様の問題に遭遇し、解決するためにwindow.postMessageを使用しました。

現在のところ、APIは文字列の受け渡しのみをサポートしていますが、ソリューションを変更すると強力になります。ソースページから詳細here

（IFRAMEによって消費されている）： -
のpostMessage APIは2つのparams期待するメッセージを、

EXターゲット：親ページ（からwindow.parent.postMessage("HELLO_PARENT", 'http://parent.com');

をIFRAMEが含まれています。例えばコンテナ）：

1. 普段

   を同じようにイベントリスナーを追加します。

   window.addEventListener('message', handleMessage, false); 
   

2. function handleMessage(event) { 
       if (event.origin != "h ttp://child.com") { return; } 
       switch(event.data.message) { 
        case "HELLO_PARENT": 
         alert("Hello Child"); 
         break; 
       } 
   } 
   

Answer 3

\同じドメインおよびクロスドメインのiframeの両方をサポートする一貫した答えはイベントシステムを使用することです（セキュリティのため）にevent.originチェックして、あなたの関数を定義します。

目的はiframeから親にカスタムイベントを送信することです。

var myCustomData: { foo: 'bar' } 
var event = new CustomEvent('myEvent', { detail: myCustomData }) 
window.parent.document.dispatchEvent(event) 

とiframeを含む親ファイルに：iframeのソースファイルで

window.document.addEventListener('myEvent', handleEvent, false) 
function handleEvent(e) { 
    console.log(e.detail) // outputs: {foo: 'bar'} 
}