iframe 自适应高度的六种方法介绍

以iframe自适应高度的六种方法介绍

• 方法一：使用onload事件
• 方法二：使用postMessage
• 方法三：使用MutationObserver
• 方法四：使用setInterval
• 方法五：使用resize事件
• 方法六：使用IntersectionObserver

方法一：使用onload事件

这是最简单的方法，可以在iframe加载完毕后自适应高度。

示例代码：

  
    <iframe src=\"\" onload=\"this.style.height=this.contentDocument.body.scrollHeight +\'px\' \" ></iframe>
  

方法二：使用postMessage

使用postMessage可以在iframe中嵌入脚本，通过postMessage来传递高度数据。

示例代码：

  
    // 在iframe中添加脚本
    <script>
      window.addEventListener(\'message\', function(e) {
        if (e.origin !== \' return;
        var height = e.data;
        document.querySelector(\'iframe\').style.height = height + \'px\';
      });
    </script>

    // 在父页面中发送高度数据
    <iframe src=\"\"></iframe>
    <script>
      var iframe = document.querySelector(\'iframe\');
      window.setInterval(function() {
        iframe.contentWindow.postMessage(iframe.contentDocument.body.scrollHeight, \'
      }, 1000);
    </script>
  

方法三：使用MutationObserver

MutationObserver可以观察到DOM节点的变化，从而自适应iframe高度。

示例代码：

  
    // 在iframe中添加脚本
    <script>
      var observer = new MutationObserver(function(mutations) {
        var height = document.body.scrollHeight;
        window.parent.postMessage(height, \'
      });
      observer.observe(document.body, { attributes: true, childList: true, characterData: true });
    </script>

    // 在父页面中接收高度数据
    <iframe src=\"\"></iframe>
    <script>
      window.addEventListener(\'message\', function(e) {
        if (e.origin !== \' return;
        var height = e.data;
        document.querySelector(\'iframe\').style.height = height + \'px\';
      });
    </script>
  

方法四：使用setInterval

使用setInterval可以定时检查iframe高度是否变化，从而自适应iframe高度。

示例代码：

  
    <iframe src=\"\" id=\"myiframe\"></iframe>
    <script>
      function resizeIframe() {
        var iframe = document.getElementById(\'myiframe\');
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + \'px\';
      }
      window.setInterval(resizeIframe, 1000);
    </script>
  

方法五：使用resize事件

使用resize事件可以在iframe大小变化时自适应iframe高度。

示例代码：

  
    <iframe src=\"\" id=\"myiframe\" onload=\"resizeIframe()\"></iframe>
    <script>
      function resizeIframe() {
        var iframe = document.getElementById(\'myiframe\');
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + \'px\';
      }
      window.addEventListener(\'resize\', resizeIframe);
    </script>
  

方法六：使用IntersectionObserver

使用IntersectionObserver可以观察到iframe是否进入视口，从而自适应iframe高度。

示例代码：

  
    <iframe src=\"\" id=\"myiframe\"></iframe>
    <script>
      var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            var iframe = document.getElementById(\'myiframe\');
            iframe.style.height = iframe.contentWindow.document.body.scrollHeight + \'px\';
            observer.unobserve(entry.target);
          }
        });
      });
      observer.observe(document.getElementById(\'myiframe\'));
    </script>