自动适应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 相关文章推荐
js动态创建、删除表格示例代码
Aug 07 Javascript
js的延迟执行问题分析
Jun 23 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
原生js实现二级联动菜单
Nov 27 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将数据导入到Foxmail的实现代码
2010/09/05 PHP
在PHP中使用redis
2013/11/04 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
MySQL面试题
2014/01/12 面试题
《抽屉原理》教学反思
2016/02/20 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python