跨域资源共享头文件能否授权跨域IFRAME访问？

Question

调整IFRAME的高度以匹配其内容页面的高度真的很麻烦，特别是当包含和内容页面不属于同一域时。CORS头信息是否可以使内容页面授权跨域访问其资源，并允许包含页读取其高度？（或者，替代方案是包含页面授权内容页面宣布其高度？）CORS是否只限于AJAX？

- user213154

Answer 1

CORS不允许您这样做，但是您可以使用跨文档消息传递在不同域名的iframe和其父窗口之间发送字符串以进行通信。

大多数浏览器都支持这种方式，虽然Internet Explorer的方式与其他浏览器不同。

假设您想要的是让iframe向父页面宣布其所需的高度，则可以将此代码放入您的iframe代码中（未经测试）：

var message = {
    width: desiredWidth,
    height: desiredHeight
};
window.parent.postMessage(JSON.stringify(message),'*');

同时在你的包含页面中添加以下内容：

function onMessage (event) {
    if (event.source != theIFrameElement.contentWindow) return;
    var message = JSON.parse(event.data);
    var desiredHeight = message.height;
    var desiredWidth = message.width;   
}

if (window.attachEvent)
    window.attachEvent('onmessage', onMessage);
else if (window.addEventListener)
    window.addEventListener('message', onMessage, false);

attachEvent 是针对 IE 浏览器，addEventListener 是针对其他浏览器。出于安全考虑，您可能希望检查目标源，但这是一般想法。

编辑: 跨文档通信的浏览器支持 (—fsb)

- PaulG

---

支持onmessage的浏览器是现代浏览器吗？如IE8、FF3等？ - user213154

这是一个浏览器支持表。我只能在我的回答中添加2个链接，因为我的声望不够多。http://caniuse.com/x-doc-messaging - PaulG

感谢提供浏览器支持表链接和答案。我接受了你的回答，因为我认为你是正确的，CORS并没有帮助，但特别感谢你超越原问题提供了非常有用的替代方案。onmessage 值得了解。 - user213154

让我们看看我能否将您的浏览器支持表添加到您的答案中。 - user213154