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