自动适应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 相关文章推荐
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
js 求时间差的实现代码
Apr 26 Javascript
详解Angular路由之路由守卫
May 10 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 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
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
linux下python抓屏实现方法
2015/05/22 Python
Python生成器以及应用实例解析
2018/02/08 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python实现logistic分类算法代码
2020/02/28 Python
python实现计算图形面积
2021/02/22 Python
商务主管岗位职责
2013/12/08 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
挂职学习心得体会
2014/09/09 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
太行山上观后感
2015/06/05 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
GO中sync包自由控制并发示例详解
2022/08/05 Golang