2012-10-19 58 views
21

我有一些麻煩在iframe內激發自定義事件並從父文檔檢測到它。 iframe和父文檔都有相同的來源(相同的協議,相同的主機,相同的端口)。從iframe觸發自定義事件到父文檔

任何建議?

+0

請寫更清楚什麼是'同一個source'。 –

+0

你可以從你的iframe調用parent.functionname()。 – user10

+0

相同的協議,相同的主機,相同的端口 –

回答

30

這工作:

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

事件觸發裏面的iframe將主文件中被檢測到。

+1

這幫了我,謝謝 –

+0

如果父頁面不包括jQuery? – Meekohi

+0

您可以按照下面的建議使用'''window.addEventListener'''。 –

19

我遇到了類似的問題,並使用window.postMessage來解決。

目前,API只支持傳遞字符串,但如果您修改解決方案,它可以是強大的。更多細節here

從源頁面(由一個iframe被消耗):
的postMessage API預計2個PARAMS - 消息,目標

例如:window.parent.postMessage("HELLO_PARENT", 'http://parent.com');

從父頁面(包含iframe中。如集裝箱):

  1. 添加事件監聽器,你通常會

    window.addEventListener('message', handleMessage, false); 
    
  2. 定義與event.origin檢查(安全)的功能\

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

我在每個IE瀏覽器和邊緣都有傳遞對象的麻煩 – migueloop

+1

@FarzadYZ - 你的評論似乎與[MDN說的是什麼]相沖突(https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) :「'window.postMessage()'方法安全地啓用了跨源通信。」 –

+0

@JohnS你說得對,我會刪除評論。 –

6

一致的答案,同時支持同域和跨域I幀是使用事件系統。

目標是將自定義事件從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'} 
}