自动适应iframe右边的高度


Posted in Javascript onDecember 22, 2016

在开发项目过程中,用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);
}

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

Javascript 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 #Javascript
JS正则子匹配实例分析
Dec 22 #Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 #Javascript
jQuery无缝轮播图代码
Dec 22 #Javascript
jQuery实现两列等高并自适应高度
Dec 22 #Javascript
JS常用加密编码与算法实例总结
Dec 22 #Javascript
Javascript 制作图形验证码实例详解
Dec 22 #Javascript
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
jQuery设计思想
2017/03/07 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python验证码截取识别代码实例
2020/05/16 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
python利用线程实现多任务
2020/09/18 Python
python中@contextmanager实例用法
2021/02/07 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
餐厅总厨求职信
2014/03/04 职场文书
关于安全的标语
2014/06/10 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
同事打架检讨书
2015/05/06 职场文书
校园之声广播稿
2015/08/18 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
golang内置函数len的小技巧
2021/07/25 Golang