iframe高度自适应撑开

YCTET • 2025-04-23 18:08 • 编程

一、什么是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 自适应高度的实现方式，不同方式都有各自的优缺点，具体可根据实际情况进行选择。

原创文章，作者：YCTET，如若转载，请注明出处：https://www.506064.com/n/371854.html