一、什么是iframe標(biāo)簽?
iframe(英文全稱 inline frame)是 HTML 語言中的一種標(biāo)簽用于在當(dāng)前HTML文檔中插入另外一個HTML文檔。通過使用 iframe 標(biāo)簽,可以在當(dāng)前頁面中插入其他網(wǎng)頁。
例如:
以上代碼可以在當(dāng)前網(wǎng)頁中插入一個高度為500像素、指向http://www.example.com的網(wǎng)頁。
二、iframe自適應(yīng)高度有哪些實現(xiàn)方式?
下面介紹幾種iframe自適應(yīng)高度的實現(xiàn)方式:
1. JS監(jiān)聽iframe高度
在子頁面中,使用如下 js 代碼監(jiān)控子頁面高度的變化,將其高度賦值給iframe標(biāo)簽:
window.parent.document.getElementById("iframe").height = document.body.scrollHeight;
其中,"iframe"是父頁面iframe標(biāo)簽的ID,通過該方式可以實現(xiàn)高度的自適應(yīng)。
不過,該方法在 iframe 中有超過一個滾動條(scroll bar)的時候會失效,如在子頁面中存在垂直滾動條,將會影響高度計算。
2. PostMessage
在子頁面中,使用 postMessage 方法向父頁面發(fā)送高度變化消息,然后在父頁面中監(jiān)聽高度變化消息并對 iframe 進(jìn)行高度賦值。
子頁面中 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 可以實現(xiàn)監(jiān)聽 DOM 節(jié)點的可見性變化。當(dāng) iframe 從隱藏變?yōu)榭梢娀蚩梢娮優(yōu)殡[藏時,會觸發(fā)回調(diào)函數(shù)并計算出新的高度賦值給 iframe。
實現(xiàn)代碼如下:
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]);
}
三、使用第三方插件實現(xiàn)自適應(yīng)高度
除了手動實現(xiàn)iframe自適應(yīng)高度,還可以使用一些已經(jīng)開發(fā)好的插件實現(xiàn)該功能。下面列舉一些常用的插件:
1. iFrame Resizer
iFrame Resizer是一個獨立的 JavaScript 庫,通過監(jiān)聽 iframe 的 contentWindow 屬性上的 message 事件,實現(xiàn)了父窗口自適應(yīng) iframe 高度的功能。
使用方法如下:
在父頁面中引入 iFrame Resizer 庫:
在子頁面中使用如下 js 代碼初始化插件:
其中 heightCalculationMethod 指定了高度計算方法,taggedElement 表示使用指定標(biāo)簽的高度計算;而 checkOrigin 表示是否需要驗證來源。
2. iframe-auto-height
iframe-auto-height 是一個基于 iFrame Resizer 開發(fā)的插件,可以自適應(yīng) iframe 高度,使用方法如下:
其中 minHeight 表示 iframe 最小高度,當(dāng)高度小于該值時插件不會縮小至該值。
四、總結(jié)
以上介紹了多種 iframe 自適應(yīng)高度的實現(xiàn)方式,不同方式都有各自的優(yōu)缺點,具體可根據(jù)實際情況進(jìn)行選擇。