通過js實(shí)現(xiàn)iframe 自適應(yīng)高度，實(shí)際上就是設(shè)置iframe的高度，設(shè)置等于內(nèi)嵌網(wǎng)頁的高度，從而看不到滾動(dòng)條和嵌套痕跡。對于用戶體驗(yàn)和網(wǎng)站美觀起著重要作用。我們可以通過css來給它直接定義一個(gè)高度，同樣可以實(shí)現(xiàn)上面的需求。當(dāng)內(nèi)容是未知或者是變化的時(shí)候。
iframe 自適應(yīng)高度如說是始終都調(diào)用同一個(gè)固定高度的頁面，我們直接寫iframe高度就可以了。而如果iframe要切換頁面，或者被包含頁面要做DOM動(dòng)態(tài)操作，這時(shí)候，就需要程序去同步iframe高度和被包含頁的實(shí)際高度了。
iframe 自適應(yīng)高度也就是說基于界面美觀和交互的考慮，很好的隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe。那么iframe 自適應(yīng)高度方法有哪些呢?下面就來簡單介紹一下。
子頁面不用設(shè)置，父頁面示例代碼：
<script type="text/javascript">
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)
bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
else if (isIE == false && isOpera == false)
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
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;
}
} //ie[6-8]、OPERA
else bHeight += 3;
var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
iframe.style.height = height + "px";
} catch (ex) {}
}
function startInit(iframeId, minHeight) {
eval("window.IE9MoreRealHeight" + iframeId + "=0");
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}
</script>
<script type="text/javascript">
startInit('gbook', 0);
</script>
<iframe style="width:100%;background:transparent;" src="gbook001.html" id="gbook" name="gbook" allowtransparency="true" frameborder="0" scrolling="no"></iframe>以上iframe高度自適應(yīng)終極方案，兼容所有瀏覽器！
