快捷導(dǎo)航

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

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

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

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

這時候找到了一個解決方法：

<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);
}

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

您可能感興趣的文章:

相關(guān)文章

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