iframe跨域問題

Question

假設我有一個名為 example.com 的網站，其中 iframe 嵌入了 iframe.net 網域，現在我想讀取 iframe 的內容並傳遞一些參數來顯示文字訊息。喜歡用用戶名嗨。

現在的問題是這無法在兩者之間建立連接，甚至無法獲取我使用以下方法的 iframe 的innerHTML

document.getElementById('myframe').contentWindow.document.body.innerHTML;

它拋出錯誤「存取屬性的權限被拒絕」

有誰知道如何跨域平台讀寫

Answer 1

在 Internet Explorer 8 中，作為參數傳遞的事件可能為 null，這就是您需要以不同方式存取事件的原因：

在frame.html中：

window.onmessage = function(event) {
   var evt = event || window.event;
   evt.source.postMessage('Message from iFrame', evt.origin);
};

在main.html上：

window.onmessage = function(event) {
   var evt = event || window.event;
   alert(evt.data);
};

該事件的觸發方式與 Rob W 所呈現的方式相同：

document.getElementById('frameId').contentWindow.postMessage('message','*');

Answer 2

如果您無法控制被框架的網站，則無法規避跨域策略。

如果您可以控制這兩個站點，則可以使用 postMessage 跨網域傳輸資料的方法。一個非常基本的例子：

// framed.htm:
window.onmessage = function(event) {
    event.source.postMessage(document.body.innerHTML, event.origin);
};

// Main page:
window.onmessage = function(event) {
    alert(event.data);
};

// Trigger:
// <iframe id="myframe" src="framed.htm"></iframe>
document.getElementById('myframe').contentWindow.postMessage('','*');