如何跨域根据内容高度动态调整 Iframe 大小？

根据内容高度调整 iframe 的大小

使用 iframe 显示其他域的内容时，调整其高度以适应内容可以由于同源策略而成为一个挑战。此策略限制不同域上的页面之间的 JavaScript 通信。

解决方案：

要克服此限制，需要采用多步骤方法，涉及 iframe 内容和框架页面。

1.跨域通信：

由于 iframe 内容和框架页面位于不同域，因此无法直接通信。但是，可以使用另一个 iframe 建立“管道”机制。

2.高度计算和消息传递：

当 iframe 内容加载时，它会计算其高度，并将框架页面上隐藏 iframe 的源设置到同一域上的帮助页面，并将计算出的高度传递给作为 URL 中的参数。

3.辅助页面和父框架调整大小：

同一域上的辅助页面从 iframe 内容接收高度并将其传递给父框架，然后父框架可以相应地调整 iframe 的大小。

代码：

框架页面：

<script type="text/javascript">
  function resizeIframe(height) {
    document.getElementById('myIframe').height = height + 60;
  }
</script>
<iframe></iframe>

Iframe 内容：

<script type="text/javascript">
  function setIframeHeight() {
    var height = document.body.scrollHeight;
    document.getElementById('iframeResizer').src = 'helper.com?height=' + height;
  }
</script>
<iframe></iframe>

帮助程序页面：

<script type="text/javascript">
  function resizeParentIframe() {
    var height = getParam('height');
    parent.parent.resizeIframe(height);
  }
  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&#]*)");
    var results = regex.exec(window.location.href);
    return results ? results[1] : "";
  }
</script>

注意：

此解决方案假设同源策略允许 iframe 内容和帮助程序页面之间的 JavaScript 通信。如果不是这种情况，可能需要采取额外措施。

以上是如何跨域根据内容高度动态调整 Iframe 大小？的详细内容。更多信息请关注PHP中文网其他相关文章！