国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  >  iframe高度自適應(yīng)撐開

iframe高度自適應(yīng)撐開

來(lái)源:千鋒教育
發(fā)布人:xqq
時(shí)間: 2023-11-23 12:35:38 1700714138

一、什么是iframe標(biāo)簽?

iframe(英文全稱 inline frame)是 HTML 語(yǔ)言中的一種標(biāo)簽用于在當(dāng)前HTML文檔中插入另外一個(gè)HTML文檔。通過(guò)使用 iframe 標(biāo)簽,可以在當(dāng)前頁(yè)面中插入其他網(wǎng)頁(yè)。

例如:



以上代碼可以在當(dāng)前網(wǎng)頁(yè)中插入一個(gè)高度為500像素、指向http://www.example.com的網(wǎng)頁(yè)。

二、iframe自適應(yīng)高度有哪些實(shí)現(xiàn)方式?

下面介紹幾種iframe自適應(yīng)高度的實(shí)現(xiàn)方式:

1. JS監(jiān)聽iframe高度

在子頁(yè)面中,使用如下 js 代碼監(jiān)控子頁(yè)面高度的變化,將其高度賦值給iframe標(biāo)簽:


window.parent.document.getElementById("iframe").height = document.body.scrollHeight;

其中,"iframe"是父頁(yè)面iframe標(biāo)簽的ID,通過(guò)該方式可以實(shí)現(xiàn)高度的自適應(yīng)。

不過(guò),該方法在 iframe 中有超過(guò)一個(gè)滾動(dòng)條(scroll bar)的時(shí)候會(huì)失效,如在子頁(yè)面中存在垂直滾動(dòng)條,將會(huì)影響高度計(jì)算。

2. PostMessage

在子頁(yè)面中,使用 postMessage 方法向父頁(yè)面發(fā)送高度變化消息,然后在父頁(yè)面中監(jiān)聽高度變化消息并對(duì) iframe 進(jìn)行高度賦值。

子頁(yè)面中 JS 代碼:


window.parent.postMessage(document.body.scrollHeight, "*");

父頁(yè)面中 JS 代碼:


window.addEventListener("message", function(event) {
  var iframe = window.document.getElementById("iframe");
  iframe.height = event.data;
}, false);

3. IntersectionObserver

使用 IntersectionObserver 可以實(shí)現(xiàn)監(jiān)聽 DOM 節(jié)點(diǎn)的可見性變化。當(dāng) iframe 從隱藏變?yōu)榭梢娀蚩梢娮優(yōu)殡[藏時(shí),會(huì)觸發(fā)回調(diào)函數(shù)并計(jì)算出新的高度賦值給 iframe。

實(shí)現(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]);
}

三、使用第三方插件實(shí)現(xiàn)自適應(yīng)高度

除了手動(dòng)實(shí)現(xiàn)iframe自適應(yīng)高度,還可以使用一些已經(jīng)開發(fā)好的插件實(shí)現(xiàn)該功能。下面列舉一些常用的插件:

1. iFrame Resizer

iFrame Resizer是一個(gè)獨(dú)立的 JavaScript 庫(kù),通過(guò)監(jiān)聽 iframe 的 contentWindow 屬性上的 message 事件,實(shí)現(xiàn)了父窗口自適應(yīng) iframe 高度的功能。

使用方法如下:

在父頁(yè)面中引入 iFrame Resizer 庫(kù):



在子頁(yè)面中使用如下 js 代碼初始化插件:





其中 heightCalculationMethod 指定了高度計(jì)算方法,taggedElement 表示使用指定標(biāo)簽的高度計(jì)算;而 checkOrigin 表示是否需要驗(yàn)證來(lái)源。

2. iframe-auto-height

iframe-auto-height 是一個(gè)基于 iFrame Resizer 開發(fā)的插件,可以自適應(yīng) iframe 高度,使用方法如下:





其中 minHeight 表示 iframe 最小高度,當(dāng)高度小于該值時(shí)插件不會(huì)縮小至該值。

四、總結(jié)

以上介紹了多種 iframe 自適應(yīng)高度的實(shí)現(xiàn)方式,不同方式都有各自的優(yōu)缺點(diǎn),具體可根據(jù)實(shí)際情況進(jìn)行選擇。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT