调整IFRAME的高度以匹配其内容页面的高度
can be a real drag,当包含和内容页面不在同一个域时.
跨源资源共享(CORS)标题可以使内容页面授权跨域访问其资源,从而允许其包含的页面读取其高度？ (或者,或者,包含页面授权内容页面宣布其高度？)
还是CORS严格的AJAX的东西？
解决方法
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是为其他人.为了安全起见,您可能需要检查目标原点,但这是一般想法.
