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

发布于 2024-11-17 01:22:29 字数 266 浏览 4 评论 0原文

调整 IFRAME 的高度以匹配其内容页面的高度可能会很麻烦当包含页面和内容页面不是来自同一域时。

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

或者 CORS 严格来说是 AJAX 的事情吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红尘作伴 2024-11-24 01:22:29

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)

CORS doesn't let you do that, but you can use cross-document messaging to send strings between iframes and their parent windows even on different domains, and use that to communicate.

Most browsers support this although Internet Explorer's way differs from the others'.

Assuming what you want is to have the iframe announce to the parent page its desired height, you could put this in your iframe code (not tested):

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

And this in your containing page:

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

The attachEvent is for IE and addEventListener is for everyone else. You might want to check the target origin for security purposes, but that's the general idea.

EDIT: Browser support for Cross-document messaging (—fsb)

回复收藏 0 原文

~没有更多了~