首页 > 编程 > JavaScript > 正文

自动适应iframe右边的高度

2019-11-19 18:19:42
字体:
来源:转载
供稿:网友

在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度。

这时候找到了一个解决方法:

<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的具体内容

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持武林网!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表