如何跨域根據內容高度動態調整 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內容：

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

幫助程式頁面：

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

注意：

此解決方案假設同源策略允許iframe 內容和幫助程式頁面之間的JavaScript 通訊。如果不是這種情況，可能需要採取額外措施。

以上是如何跨域根據內容高度動態調整 Iframe 大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！