當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

iframe 高度根据子页面来确定

發(fā)布時間：2023/12/2 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 iframe 高度根据子页面来确定小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

標(biāo)題描述

一、解決方法	解決代碼
二、關(guān)于高度問題	簡單講一下jquery中的 height()，innerHeight()、outHeight()， js中的offsetHeight、clientHeight、scrollHeight。如何獲取沒有給出高度的元素的高度？詳細(xì)介紹offsetHeight,clientHeight,scrollHeight之間的區(qū)別
三、試驗歷程	例舉了一下我寫這個遇到的坑，以及怎么得出最后的方案。

一、解決方法

因為我這是寬度已知，整體居中的布局，滾動條加在 iframe 標(biāo)簽上會很奇怪，而且iframe的高度不確定，所以滾動條只能加給父級body上。

//自動計算Iframe的高度 (function(){//根據(jù)ID獲取iframe對象var ifr = document.getElementById('iframe-box'); ifr.onload = function() { //DOM0級事件，沒有兼容var timer = setTimeout(function(){clearTimeout(timer);//解決打開高度太高的頁面后再打開高度較小頁面滾動條不收縮ifr.style.height='0px';var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow;var height = Math.max(calcPageHeight(iDoc));ifr.style.height = height + "px";},200) }// 計算頁面的實際高度，iframe自適應(yīng)會用到function calcPageHeight(doc) {var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);var height = Math.max(cHeight, sHeight);return height;} })();

注意：
（1）iframe 是雙標(biāo)簽，需要結(jié)尾：<iframe></iframe>
（2）iframe 標(biāo)簽中的 scrolling 要為 “no”，禁止 iframe 的滾動條；
（3）記得使用延時器，因為 iframe 中有異步操作，iframe中的DOM結(jié)構(gòu)和資源加載完成，可能異步還沒有執(zhí)行完，所以用延時器改變一下加載 iframe 子元素高度的順序。
（4）如果需要對同 iframe 做相同事件，但是邏輯不同的操作，使用事件監(jiān)聽。

//事件監(jiān)聽的封裝函數(shù)---通過事件監(jiān)聽寫的邏輯操作也稱 DOM2級事件。DOM2級事件存在兼容問題 function addEvent(ele,type,callback){ if(ele.addEventListener){ ele.addEventListener(type,callback,false); } else if(ele.attachEvent){ ele.attachEvent("on"+type,callback); } else { ele["on"+type] = callback; } } //使用 addEvent(obox,"click",function(){ console.log(1); })

（5）有時候本地調(diào)試的時候，比如打開的文件在瀏覽器開頭為 file:// 瀏覽器也會默認(rèn)為跨域頁面，這時候只需要自己搭建一個服務(wù)器環(huán)境（phpnow之類的都可以），就可以了；
（5）jquery 寫 onload 事件的寫法：

$("#iframe").load(function(){//... })

（6）可參考資料：iframe 動態(tài)onload事件處理方式
（7）其他：圖片onload事件詳解，兼容所有瀏覽器！

二、關(guān)于高度

如何獲取沒有給出高度的元素的高度？

alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度 alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度 alert($(document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度包括border padding margin alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?/span> alert($(document).width());//瀏覽器當(dāng)前窗口文檔對象寬度 alert($(document.body).width());//瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度包括border padding margin

三、試驗歷程

1. 參考怎么讓iframe的高度和寬度可以100%

這里 onload 中寫的是 this.style.height，有的是直接寫this.height，二者的區(qū)別是，前面是給 iframe 添加 css 樣式，把 height 作為 css 中的屬性。后者是把 height 當(dāng)做 iframe 標(biāo)簽中的內(nèi)置可見屬性，

一開始參考這里面的代碼，發(fā)現(xiàn)有個問題：
當(dāng)iframe 中有異步操作時，高度獲取有時候不準(zhǔn)確，不是子頁面的實際高度；當(dāng)網(wǎng)速較慢時，高度幾乎都能計算出并獲取子頁面的高度。

2. 參考iframe嵌套界面自適應(yīng)，可高度自由收縮

之后參考了這個博主的文章，但是還是會碰到上面的問題，只是會給頁面一個固定高度，當(dāng)我子頁面的高度>這個固定高度時，子頁面多出的部分會被隱藏掉。

3. 解決首次彈出層iframe框架時，iframe框架所調(diào)用的頁面高度和寬度取不到的問題

然后發(fā)現(xiàn)了這篇文章，上面問題導(dǎo)致的原因，可能是獲取高度和iframe加載的順序上面不對，通用延時函數(shù)setTimeout來調(diào)整執(zhí)行順序即可解決。

$(function () {setTimeout(function () {//在這里就可以獲取到頁面元素高度}, 0); });

總結(jié)

以上是生活随笔為你收集整理的iframe 高度根据子页面来确定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：移动端 flexible.js 布局详解
下一篇： layui 子页面写弹出框覆盖父页面，以