46

iframe 内でカスタム イベントを発生させ、それを親ドキュメントから検出するのに問題があります。iframe と親ドキュメントのオリジンは同じです (同じプロトコル、同じホスト、同じポート)。

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

4

4 に答える 4

44

私は同様の問題に遭遇し、以前window.postMessageは解決していました。

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

ソースページから (iframe によって消費されている):
postMessage API は 2 つのパラメーター - message 、 target を想定 しています。

元：window.parent.postMessage("HELLO_PARENT", 'http://parent.com');

親ページから (iframe を含む。例: Container):

  1. 通常どおりイベントリスナーを追加します

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

  2. event.origin check を使用して関数を定義します (セキュリティのため) \

     function handleMessage(event) {  
     if (event.origin != "http://child.com") { return; }  
     switch(event.data) {   
          case "HELLO_PARENT":  
             alert("Hello Child");  
             break;  
     } 
 }
于 2013-04-03T04:18:33.057 に答える
40

これは機能します：

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

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

于 2012-10-19T05:29:11.977 に答える
33

同じドメインとクロスドメインの両方の iframe をサポートする一貫した答えは、イベント システムを使用することです。

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

iframe ソース ファイル内:

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

そして、iframe を含む親ファイルにこれを追加します。

window.document.addEventListener('myEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}
于 2016-12-28T12:04:30.053 に答える