iframe高度自適應撐開

一、什麼是iframe標籤？

iframe（英文全稱 inline frame）是 HTML 語言中的一種標籤用於在當前HTML文檔中插入另外一個HTML文檔。通過使用 iframe 標籤，可以在當前頁面中插入其他網頁。

例如：

<iframe src="http://www.example.com" height="500"></iframe>

以上代碼可以在當前網頁中插入一個高度為500像素、指向http://www.example.com的網頁。

二、iframe自適應高度有哪些實現方式？

下面介紹幾種iframe自適應高度的實現方式：

1. JS監聽iframe高度

在子頁面中，使用如下 js 代碼監控子頁面高度的變化，將其高度賦值給iframe標籤：

window.parent.document.getElementById("iframe").height = document.body.scrollHeight;

其中，”iframe”是父頁面iframe標籤的ID，通過該方式可以實現高度的自適應。

不過，該方法在 iframe 中有超過一個滾動條（scroll bar）的時候會失效，如在子頁面中存在垂直滾動條，將會影響高度計算。

2. PostMessage

在子頁面中，使用 postMessage 方法向父頁面發送高度變化消息，然後在父頁面中監聽高度變化消息並對 iframe 進行高度賦值。

子頁面中 JS 代碼：

window.parent.postMessage(document.body.scrollHeight, "*");

父頁面中 JS 代碼：

window.addEventListener("message", function(event) {
  var iframe = window.document.getElementById("iframe");
  iframe.height = event.data;
}, false);

3. IntersectionObserver

使用 IntersectionObserver 可以實現監聽 DOM 節點的可見性變化。當 iframe 從隱藏變為可見或可見變為隱藏時，會觸發回調函數並計算出新的高度賦值給 iframe。

實現代碼如下：

var intersectionObserver = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > 0) {
      var iframe = entry.target;
      iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
      observer.unobserve(iframe);
    }
  });
});

var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
  intersectionObserver.observe(iframes[i]);
}

三、使用第三方插件實現自適應高度

除了手動實現iframe自適應高度，還可以使用一些已經開發好的插件實現該功能。下面列舉一些常用的插件：

1. iFrame Resizer

iFrame Resizer是一個獨立的 JavaScript 庫，通過監聽 iframe 的 contentWindow 屬性上的 message 事件，實現了父窗口自適應 iframe 高度的功能。

使用方法如下：

在父頁面中引入 iFrame Resizer 庫：

<script src="iframeResizer.min.js"></script>

在子頁面中使用如下 js 代碼初始化插件：

<script src="iframeResizer.contentWindow.min.js"></script>

<script>
  iFrameResize({
    heightCalculationMethod: 'taggedElement',
    checkOrigin: false
  });
</script>

其中 heightCalculationMethod 指定了高度計算方法，taggedElement 表示使用指定標籤的高度計算；而 checkOrigin 表示是否需要驗證來源。

2. iframe-auto-height

iframe-auto-height 是一個基於 iFrame Resizer 開發的插件，可以自適應 iframe 高度，使用方法如下：

<script src="https://cdn.jsdelivr.net/gh/kennyyu/iframe-auto-height/dist/iframe-auto-height.min.js"></script>

<script>
  iframeAutoHeight.init({
    minHeight: 200
  });
</script>

其中 minHeight 表示 iframe 最小高度，當高度小於該值時插件不會縮小至該值。

四、總結

以上介紹了多種 iframe 自適應高度的實現方式，不同方式都有各自的優缺點，具體可根據實際情況進行選擇。