快捷導(dǎo)航

自動(dòng)適應(yīng)iframe右邊的高度

更新時(shí)間：2016年12月22日 11:28:17 作者：以茜為貴

在開發(fā)項(xiàng)目過(guò)程中，用iframe嵌套，會(huì)發(fā)現(xiàn)一個(gè)問題，用iframe嵌套的html結(jié)構(gòu)右邊不會(huì)自動(dòng)適應(yīng)高度。如何解決這一問題呢，下面就跟小編一起來(lái)看下吧

在開發(fā)項(xiàng)目過(guò)程中，用iframe嵌套，會(huì)發(fā)現(xiàn)一個(gè)問題，用iframe嵌套的html結(jié)構(gòu)右邊不會(huì)自動(dòng)適應(yīng)高度。

這時(shí)候找到了一個(gè)解決方法：

<iframe name="my_iframe" id="mainframe" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="100%" src=""></iframe>

2、記住要引入iframe.js文件

<script type="text/javascript" src="js/iframe.js" ></script>

下面是iframe.js的具體內(nèi)容

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;
      }
    }
    else//ie[6-8]、OPERA
      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);
}

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jQuery-serialize()輸出序列化form表單值的方法
jQuery-serialize()輸出序列化表單值在工作中很常見也很實(shí)用，于是本人搜集整理了一些，需要了解的朋友可以詳細(xì)參考下
2012-12-12
jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解
這篇文章主要介紹了jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解,extend()函數(shù)用于jQuery插件的開發(fā),本文主要分析它的實(shí)現(xiàn)原理,需要的朋友可以參考下
2015-02-02
jQuery實(shí)現(xiàn)字符串按指定長(zhǎng)度加入特定內(nèi)容的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)字符串按指定長(zhǎng)度加入特定內(nèi)容的方法,實(shí)例分析了jQuery操作字符串的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
深入了解query和params的使用區(qū)別
這篇文章主要介紹了深入了解query和params的使用區(qū)別，路由傳參的時(shí)候，有倆兄弟，一個(gè)叫query，一個(gè)叫parmas，你說(shuō)他們倆長(zhǎng)得也不像吧，可這用法實(shí)在是太類似了，下面就讓我們分別從vue路由和Node接收兩個(gè)角度講他們的區(qū)別,需要的朋友可以參考下
2019-06-06
對(duì)象不支持indexOf屬性或方法的解決方法(必看)
下面小編就為大家?guī)?lái)一篇對(duì)象不支持indexOf屬性或方法的解決方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
jquery+css實(shí)現(xiàn)動(dòng)感的圖片切換效果
這篇文章主要介紹了jquery+css實(shí)現(xiàn)動(dòng)感的圖片切換效果，效果實(shí)現(xiàn)很精致，動(dòng)畫簡(jiǎn)潔大方，推薦給大家，感興趣的小伙伴們可以參考一下
2015-11-11
jquery檢測(cè)input checked 控件是否被選中的方法
這篇文章主要介紹了jquery檢測(cè)input checked 控件是否被選中的方法,需要的朋友可以參考下
2014-03-03
jQuery+css+html實(shí)現(xiàn)頁(yè)面遮罩彈出框
面遮罩彈出框已經(jīng)不是一個(gè)陌生的話題了，實(shí)現(xiàn)的方法大同小異多種多樣，今天用jQuery實(shí)現(xiàn)頁(yè)面遮罩彈出框，主要用的技術(shù)有JQuery，css和html,感興趣的朋友可以參考下哈
2013-03-03
解決jQuery uploadify在非IE核心瀏覽器下無(wú)法上傳
之前上傳了一個(gè)通過(guò)Flash實(shí)現(xiàn)多文件上傳，但是在IE正常運(yùn)行，F(xiàn)ireFox 不能正常上傳。經(jīng)過(guò)反復(fù)研究學(xué)習(xí)，之所以firefox和360瀏覽器無(wú)法正常運(yùn)行，是因?yàn)镕ireFox、chrome、360瀏覽器等支持HTML5的瀏覽器不會(huì)再文件上傳時(shí)自動(dòng)帶入session信息和cookie，不共享session。
2015-08-08
深入分析jquery解析json數(shù)據(jù)
這篇文章主要深入分析jquery解析json數(shù)據(jù)的方法，非常的詳盡,需要的朋友可以參考下
2014-12-12