iframe根據內容自適應高度的實現

在前端開發中，iframe 經常被用來實現非同步載入內容以及跨域資源共享等功能，但是如果 iframe 內容高度不確定，就可能會出現 iframe 頁面滾動不完整的問題，影響用戶體驗。針對這個問題，我們可以通過一些技巧，實現 iframe 根據其內容自適應高度的目的。

一、設置 iframe 高度

在 iframe 沒有設置高度時，其默認高度是 150 像素。我們可以通過 CSS 屬性設置 iframe 高度為 100% 實現全屏顯示，但是這樣設置後，iframe 頁面會超出父級元素的高度。

二、使用 JS 獲取 iframe 內容高度

<iframe id="myIframe" src="https://www.example.com"></iframe>
<script>
  var iframe = document.getElementById("myIframe");
  var height = iframe.contentWindow.document.documentElement.scrollHeight;
</script>

當我們在父級頁面中通過 JS 獲取 iframe 頁面中的內容高度時，無法直接訪問 iframe 內部的 DOM 元素。這是因為安全限制，瀏覽器不允許我們訪問其他域名的頁面。

解決方案是使用 contentWindow 屬性來間接訪問 iframe 內部的 DOM。通過 contentWindow.document訪問iframe 頁面內部的 DOM，再獲取其高度。

上面的代碼中，我們使用 document.documentElement.scrollHeight 獲取到了 iframe 內容的滾動高度。

三、設置 iframe 高度為內容高度

<iframe id="myIframe" src="https://www.example.com" onload="iframeLoaded()"></iframe>
<script>
  function iframeLoaded() {
    var iframe = document.getElementById("myIframe");
    var height = iframe.contentWindow.document.documentElement.scrollHeight;
    iframe.style.height = height + "px";
  }
</script>

我們通過上一步獲取到了 iframe 內容的高度，現在我們只需要將 iframe 元素的高度設置為獲取到的高度值即可。

但是，直接在 JS 中設置 iframe 的高度時，會出現一閃一閃的效果，因為內容高度會在載入完後才會獲取到，設置高度不是瞬間完成的。為了避免這個問題，我們可以使用 onload 事件，在 iframe 載入完成後再設置高度。

四、動態更新 iframe 高度

<iframe id="myIframe" src="https://www.example.com" onload="iframeLoaded()"></iframe>
<script>
  function iframeLoaded() {
    var iframe = document.getElementById("myIframe");
    var height = iframe.contentWindow.document.documentElement.scrollHeight;
    iframe.style.height = height + "px";
  }
  setInterval("updateIframeHeight()", 200);
  function updateIframeHeight() {
    var iframe = document.getElementById("myIframe");
    var height = iframe.contentWindow.document.documentElement.scrollHeight;
    iframe.style.height = height + "px";
  }
</script>

在某些情況下，iframe 內容的高度可能會發生動態變化，例如輸入框隨著輸入內容的變化擴張。此時，我們需要動態獲取 iframe 的高度，並重新設置 iframe 的高度。

我們可以使用 setInterval 來定時獲取 iframe 的高度，並更新內容高度。在這裡，我們設定 200 毫秒的間隔，用於獲取 iframe 的高度並更新。

五、小結

通過上述技巧，我們可以輕鬆地實現 iframe 根據內容自適應高度的效果。然而，在使用 iframe 時，我們也需要注意到一些潛在的問題，例如跨域訪問，iframe 內部的事件監聽等等。希望本文對大家有所幫助。