如何动态调整iframe高度并绕过同源策略？

动态 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中文网其他相关文章！