cross site iframe postMessage from child to parent

我在瀏覽我的問題時發現了此SO sample，但我想知道如何在我的場景中使用它。我有一個來自另一個域的iframe，並且我想要檢測iframe url何時從另一個域中的另一個頁面更改爲另一個域。所以，我當時的想法是在iframe第二頁打開時有這樣的事情：cross site iframe postMessage from child to parent

<script type="text/javascript"> 
    $(document).ready(function() { 
parent.postMessage("Second Page"); 
} 
</script>

這就是我需要的，我只需要接收的iframe具有不同的URL的消息。現在父頁面上，我可能有這樣的事情：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#frame').load(function() { 
      var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

// Listen to message from child window 
eventer(messageEvent,function(e) { 
var secondPageValue = // I want to get the value from the child page here, how can I do that? 
},false);    
     }); 
    }); 
</script>

我想使用這個選項的postMessage首次，所以每一個建議，將不勝感激。另外，我是否需要在子端包含一些JS庫（如jquery）來完成這項工作？

在此先感謝，Laziale

來源

2014-04-04 Laziale

[Html5 - 跨瀏覽器Iframe postmessage可能重複 - 子對父級？]（http://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent） –

@ C_B我試圖得到確認，如果多數民衆贊成在我聯繫iframe所有者之前的方式。 Thx – Laziale

您需要在使用postMessage時設置targetOrigin。

<script type="text/javascript"> 
    $(document).ready(function() { 
     parent.postMessage("Second Page",'*'); 
    } 
</script>

然後在主機頁面上。

function addAnEventListener(obj,evt,func){ 
    if ('addEventListener' in obj){ 
     obj.addEventListener(evt,func, false); 
    } else if ('attachEvent' in obj){//IE 
     obj.attachEvent('on'+evt,func); 
    } 
} 

function iFrameListener(event){ 
    secondPageValue = event.data; 
} 

var secondPageValue=''; 

addAnEventListener(window,'message',iFrameListener);

來源

2014-04-05 20:35:17

這段代碼有幾個問題。例如，您可以定義函數addEventListener，然後依賴您的函數聲明剛剛覆蓋的window.addEventListener。你也應該檢查obj而不是window的'addEventListener'。 – Octopus

檢查http://davidwalsh.name/window-iframe出來。這是一個完美的工作示例。

父對象提供對子窗口主窗口的引用。所以，如果我有一個IFRAME和控制檯中它的父，控制檯將讀取：

// Every two seconds.... 
setInterval(function() { 
    // Send the message "Hello" to the parent window 
    // ...if the domain is still "davidwalsh.name" 
    parent.postMessage("Hello","http://davidwalsh.name"); 
}, 3000);

因爲我們現在有窗口的保持，我們可以PostMessage的吧：

// Create IE + others compatible event handler 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

// Listen to message from child window 
eventer(messageEvent,function(e) { 
    console.log('parent received message!: ',e.data); 
},false);

該指令以上觸發iFrame每3秒向父窗口發送消息。沒有來自主窗口的初始消息！

來源

2015-04-13 10:07:52

tnx Raidri ..會做到這一點。 –

cross site iframe postMessage from child to parent

回答

相關問題