动态 iframe 高度调整
通过 iframe 集成外部来源的内容时，确保正确的高度调整变得至关重要。本文深入研究了一种绕过同源策略的解决方案，允许 iframe 自动调整大小以适应其内容。
利用浏览器怪癖绕过同源策略
关键在于利用浏览器的一个怪癖，允许父域与 iframe 通信，而 iframe 无法直接与其父域通信。此通信层次结构如下所示：
| Page | Can Communicate With |
|---|---|
| www.foo.com/home.html | N/A (parent) |
| www.bar.net/framed.html | www.foo.com/helper.html (child) |
| www.foo.com/helper.html | www.foo.com/home.html (parent) |
使用 URL 参数传递高度信息
要确定 iframe 的高度，内容页面 (www.bar.net/ framed.html）计算它并通过 URL 参数设置辅助 iframe（位于与父级相同的域中）的 src 属性。然后，辅助 iframe 将此信息转发给父级，父级可以相应地调整 iframe 高度。
代码实现
www.foo.com/home。 html（父级页面）：
function resizeIframe(height) {
// Adjust the iframe height with a slight margin
document.getElementById('frame_name_here').height = parseInt(height) + 60;
}www.bar.net/framed.html（子页面）：
function iframeResizePipe() {
// Calculate and pass the height to the helper iframe
var height = document.body.scrollHeight;
var pipe = document.getElementById('helpframe');
pipe.src = 'http://www.foo.com/helper.html?height=' + height + '&cacheb=' + Math.random();
}www.foo .com/helper.html（帮助页面）：
function parentIframeResize() {
// Extract the height from the URL argument
var height = getParam('height');
// Communicate the height to the parent page
parent.parent.resizeIframe(height);
}以上是如何动态调整iframe高度并绕过同源策略？的详细内容。更多信息请关注PHP中文网其他相关文章！
