亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

iframe窗口高度自適應怎么實現

小億
104
2023-08-11 10:34:44
欄目: 編程語言

要實現iframe窗口的高度自適應,可以使用以下方法:

1. 使用JavaScript自動調整高度:在iframe的內容頁面中,通過JavaScript來獲取內容的實際高度,然后將該高度應用于iframe的高度屬性。這可以使用以下代碼實現:

<script>

  function resizeIframe() {

    var iframe = document.getElementById('my-iframe');

    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';

  }

</script>

<iframe id="my-iframe" src="embedded-page.html" onload="resizeIframe();" frameborder="0"></iframe>

在上述代碼示例中,resizeIframe()函數會在iframe加載完成后被調用,并計算出內容的實際高度并將其應用到iframe的高度。

2. 使用postMessage通信:如果您無法修改嵌入頁面的內容或使用JavaScript來控制iframe的高度,可以使用postMessage進行跨域通信。嵌入頁面和父頁面之間可以通過postMessage傳遞消息,以便調整iframe的高度。

以下是一個簡單的示例(假設嵌入頁面和父頁面在同一域名下):

在嵌入頁面中的腳本:

<script>

  // 發送當前頁面的高度給父頁面

  function sendHeight() {

    var height = document.body.scrollHeight;

    parent.postMessage({ height: height }, '*');

  }

  // 監聽父頁面發送的消息

  window.addEventListener('message', function(event) {

    if (event.data === 'resize') {

      sendHeight();

    }

  });

</script>

在父頁面中的腳本:

<script>

  // 監聽嵌入頁面發送的消息

  window.addEventListener('message', function(event) {

    if (event.data.height) {

      var iframe = document.getElementById('my-iframe');

      iframe.style.height = event.data.height + 'px';

    }

  });

  // 調整iframe高度

  function resizeIframe() {

    var iframe = document.getElementById('my-iframe');

    iframe.contentWindow.postMessage('resize', '*');

  }

  // 在窗口大小變化時調整iframe高度

  window.addEventListener('resize', resizeIframe);

</script>

<iframe id="my-iframe" src="embedded-page.html"></iframe>

上述代碼示例中,嵌入頁面通過sendHeight()函數將其內容的高度傳遞給父頁面。父頁面監聽嵌入頁面發送的消息,并根據接收到的高度值調整iframe的高度。還可以通過監聽窗口大小變化事件來實時調整iframe的高度。

這些方法可以幫助您實現iframe窗口的自適應高度。請注意,當使用跨域通信(postMessage)時,確保在通信過程中進行安全性檢查以防止惡意代碼的注入。


0
阳原县| 莫力| 遵义市| 洱源县| 林周县| 香格里拉县| 贺州市| 含山县| 柳林县| 定西市| 博爱县| 和政县| 化德县| 安仁县| 裕民县| 呼和浩特市| 阳西县| 清涧县| 喀什市| 灵寿县| 平陆县| 临城县| 藁城市| 三河市| 金塔县| 灵宝市| 青浦区| 库尔勒市| 潞西市| 南乐县| 五寨县| 清涧县| 荆州市| 航空| 宜章县| 榆社县| 普格县| 秦皇岛市| 全州县| 张北县| 温州市|