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);
};

在ma​​in.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('','*');