如何根据iFrame的跨域内容动态调整iFrame的大小？-js教程-PHP中文网

如何根据iFrame的跨域内容动态调整iFrame的大小？

Patricia Arquette

发布： 2024-12-30 10:26:10

原创

1029 人浏览过

How Can I Dynamically Resize an iFrame Based on its Cross-Domain Content?

根据内容调整 iFrame 大小：跨域通信导航

了解跨域挑战

在 iFrame 中显示来自外部域的内容时，同源策略对动态调整这些 iFrame 的大小以适应其大小提出了挑战内容。

规避策略

绕过跨域限制的一种技术涉及利用浏览器怪癖，该怪癖允许嵌套 iFrame 结构中的页面之间进行通信。本质上：

父页面 (www.foo.com/home.html) iframes 子页面 (www.bar.com/framed.html)。
子页面 (www .bar.com/framed.html) iframe 帮助页面(www.foo.com/helper.html)。

此结构允许以下之间进行通信：

www.bar.com/framed.html 和 www.foo .com/helper.html（在同一 iFrame 内）
www.foo.com/home.html 和 www.foo.com/helper.html （在同一域上）

实施

在 www.foo.com/home.html 中：

<script>
  function resizeIframe(height) {
    document.getElementById("frame_name_here").height = parseInt(height) + 60;
  }
</script>
<iframe>

登录后复制

在www.bar.com/framed.html:

<body onload="iframeResizePipe()">
<iframe>

登录后复制

在 www.foo.com/helper.html:

<body onload="parentIframeResize()">
<script>
  function parentIframeResize() {
    var height = getParam("height");
    parent.parent.resizeIframe(height);
  }

  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&]*)");
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
  }
</script>

登录后复制

此解决方案涉及通过“helper”iframe (www.foo.com/helper.html) 进行通信，该 iframe 与父页面位于同一域中，并有助于调整请求大小子 iFrame 和父 iFrame 之间。

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