跨域资源共享标头可以授权 X-Domain IFRAME 访问吗？

Posted 2023-02-27

【中文标题】跨域资源共享标头可以授权 X-Domain IFRAME 访问吗？

【英文标题】：Can Cross-Origin Resource Sharing headers authorize X-Domain IFRAME access?

【发布时间】：2011-09-21 13:23:48

【问题描述】：

当包含页面和内容页面不在同一个域时，调整 IFRAME 的高度以匹配其内容页面的高度 can be a real drag。

跨域资源共享 (CORS) 标头是否允许内容页面授权跨域访问其资源，从而允许其包含页面读取其高度？ （或者，或者，包含页面授权内容页面宣布其高度？）

或者 CORS 是严格意义上的 AJAX 东西？

【参考方案1】：

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

尽管Internet Explorer's way 与the others 不同，但大多数浏览器都支持这一点。

假设您想要让 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 适用于其他所有人。出于安全目的，您可能想要检查目标来源，但这是一般的想法。

编辑：Browser support for Cross-document messaging (—fsb)

【讨论】：

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

这里是浏览器支持表。我只能在我的答案中添加 2 个链接，因为我没有足够的代表来获得更多。 caniuse.com/x-doc-messaging

感谢浏览器支持表链接和答案。我接受它的假设是您是对的，即 CORS 无济于事，但特别是对于以非常有用的替代方案超越原始问题。 onmessage 值得了解。

让我们看看我是否可以将您的浏览器支持表添加到您的答案中。