今天小編給大家分享一下js如何控制Iframe高度自適應(yīng)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁(yè)設(shè)計(jì)師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁(yè)設(shè)計(jì)技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)公司專業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站開發(fā)、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗(yàn)的提升,我們力求做到極致!
方法一：js控制Iframe 高度自適應(yīng)
這個(gè)方法之前一直都在用，沒有問題，但最新發(fā)現(xiàn)有些情況不行（具體原因不清楚）
/*
function thisIframeHeightAuto(){
setIframeHeight("auditList");
};
*/
//window.setInterval("iframeHeightAuto()", 200);
function setIframeHeight(iframeId){
var cwin = document.getElementById(iframeId);
if(document.getElementById){
if(cwin && !window.opera){
if(cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
cwin.height = cwin.contentDocument.body.offsetHeight;//FF NS
console.log("FF NS cwin.height=" +cwin.height);
}else if(cwin.Document && cwin.Document.body.scrollHeight){
cwin.height = cwin.Document.body.scrollHeight;//IE
console.log("IE cwin.height=" +cwin.height);
}
}else if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight){
cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
}
}
console.log("cwin.height=" + cwin.height);
};方法二：html代碼控制
在方法一不生效的時(shí)候，使用了方法二。
頭部的html不需要任何的聲明，都去掉，如下面代碼所示：
iframe高度自適應(yīng)
上面如果能自適應(yīng)，就不需要下面的；如果上面還不自適應(yīng)，需要設(shè)置
1、body樣式中的 overflow: hidden; 絕對(duì)不對(duì)省略；
2、Iframe 中的 height='100%' 以及 滾動(dòng)條不能設(shè)為no(默認(rèn)是yes，不用設(shè)置即可)
方法三：同樣是js控制（未驗(yàn)證）
原理：
Iframe頁(yè)面的內(nèi)容利用一個(gè)
進(jìn)行包裹，div會(huì)自適應(yīng)內(nèi)部高度，因此，可以通過div實(shí)現(xiàn)子頁(yè)面高度的獲取。
Iframe頁(yè)面
...
父頁(yè)面（嵌入Iframe的頁(yè)面）增加js：
//跨域或子頁(yè)面無"iframeContent"則高度不能自適應(yīng)
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var height = iframe.contentWindow.document.getElementById("iframeContent").offsetHeight;
if (!height) {
height = minHeight;
}
if (height < minHeight) {
height = minHeight;
}
iframe.style.height = height + "px";
} catch (e) {
iframe.style.height = minHeight + "px";
}
} 方法四：同樣是js控制（未驗(yàn)證）
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1,] == false);
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var bHeight = 0;
if (isChrome == false && isSafari == false) {
try {
bHeight = iframe.contentWindow.document.body.scrollHeight;
} catch (ex) {
}
}
var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐瀏覽器高度不斷增加刪除+2
else if (isIE == false && isOpera == false && iframe.contentWindow) {
try {
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
} catch (ex) {
}
}
else if (isIE == true && isIE9More) {//ie9+
var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
if (heightDeviation == 0) {
bHeight += 3;
} else if (heightDeviation != 3) {
eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
bHeight += 3;
}
}
else//ie[6-8]、OPERA
bHeight += 3;
var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
//alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
iframe.style.height = height + "px";
} catch (ex) { }
}
//定時(shí)任務(wù)
function startInit(iframeId, minHeight) {
eval("window.IE9MoreRealHeight" + iframeId + "=0");
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}以上就是“js如何控制Iframe高度自適應(yīng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站題目：js如何控制Iframe高度自適應(yīng)
文章源于：http://weahome.cn/article/peogej.html
重慶分公司
重慶分公司
