您的位置:

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