如何根據iFrame的跨域內容動態調整iFrame的大小？-js教程-PHP中文網

如何根據iFrame的跨域內容動態調整iFrame的大小？

Patricia Arquette

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

原創

1038 人瀏覽過

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中文網其他相關文章！