從跨網域的iframe與窗口進行通信

Question

假設我有一個域名為a.example.com的網頁，而該iframe的域名為b.example.com （不滿足相同的原始政策）。

現在，我從具有相同域（即b.example.com）的iframe中使用window.open打開一個新窗口。

我的任務是將郵件發送回iframe。

window.opener對於打開的窗口是空的。

我讀到可以使用postMessage進行通信，但是應該將數據發布到哪個元素。 如何獲取父窗口（即iframe）的引用。

Answer 1

誰說iframe是您的？ 在這方面，瀏覽器無法信任您，因為有人可能會弄亂您的頁面並加載其他內容，因此現代瀏覽器將iframe通訊完全鎖定。 即使使用訪問控制，也不會實現雙向通信。

但是，如果可以使iframe和所屬文檔“說相同的語言”，則可以使用postMessage通信：postMessage基本上將字符串（並且僅字符串，因此所有JS對象都需要JSON.stringified）發布為“可見”給所有人”一堆字符串。 任何文檔上下文都可以發布消息，並且每個上下文都可以決定偵聽是否發布了新消息。 如果是這樣，則可以使iframe發送擁有窗口可以解析的消息，反之亦然。

Answer 2

為了使他們的網站（其中包含您控制內容的iframe能夠從通過單擊內容中打開的窗口打開的窗口中獲取信息，他們必須允許訪問自己網站上的內容。 如果您只想從通過單擊您控制的頁面上的某個東西打開的窗口中獲取數據，例如：

var newWindow = open('yourURL.php');
var someElement = newWindow.document.getElementById('someId');
console.log(someElement.value); // assuming it's an input

如果您希望從打開新頁面的頁面獲取信息而不是新打開的窗口，則如下所示：

var openerElement = opener.document.getElementById('openerWindowId');
console.log(openerElement.innerHTML); // assuming it's not an input