我们有两个域名domain.com
和sub.domain.com
在domain.com上
<html>
<head>
<title>Main</title>
</head>
<body>
<h1>This is the parent</h2>
<iframe src="http://sub.domain.com/results.aspx"
width="100%" height="1px" id="iframe1">
</iframe>
</body>
</html>
问题:我们如何调整iframe高度从1px
到实际高度(iframe加载时)?当用户在iframe中播放时,它的高度可以改变,所以我怀疑可能需要将它挂钩到某个事件。
现在我完全清楚在浏览器中阻止了交叉脚本,甚至子域(或不同的端口号)构成了“跨域”。但是,我们控制这两个域,所以我正在寻找一个很好的解决方案。我们查看了window.postMessage,它似乎专门为此设计但无法使其正常工作。
答案 0 :(得分:2)
您的案例很简单,因为它是跨脚本的子域(不是跨域编写不同的域)。只需在您的网页和iframe中分配document.domain = "domain.com"
即可。
有关更多信息,请查看:
Cross sub domain iframes and JavaScript和
How to communicate between frames?
答案 1 :(得分:1)
您正在寻找的是iframe消息传递:
https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
在父页面中:
var iframe = document.getElementById('myIframe');
function resizeIframe(event){
if (event.origin !== "http://example.org"){
// We trust this message
iframe.setAttribute("style", "width:" + event.data + "px;");
}
}
window.addEventListener('message', resizeIframe, false);
在子页面中:
function postParent(){
window.postMessage($(body).height(), 'http://parentdomain.org');
}
$(window).on('load', postParent);