iframe高度自适应撑开
一、什么是iframe标签？
iframe（英文全称 inline frame）是 HTML 语言中的一种标签用于在当前HTML文档中插入另外一个HTML文档。通过使用 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 库：
在子页面中使用如下 js 代码初始化插件：
其中 heightCalculationMethod 指定了高度计算方法，taggedElement 表示使用指定标签的高度计算；而 checkOrigin 表示是否需要验证来源。
2. iframe-auto-height
iframe-auto-height 是一个基于 iFrame Resizer 开发的插件，可以自适应 iframe 高度，使用方法如下：
其中 minHeight 表示 iframe 最小高度，当高度小于该值时插件不会缩小至该值。
四、总结
以上介绍了多种 iframe 自适应高度的实现方式，不同方式都有各自的优缺点，具体可根据实际情况进行选择。
