自动适应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数据分享
May 12 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
成教毕业生自我鉴定
2013/10/23 职场文书
职专应届生求职信
2013/11/16 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
《问银河》教学反思
2014/02/19 职场文书
中国好声音广告词
2014/03/18 职场文书
中秋手机店促销方案
2014/06/16 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
公司授权委托书样本
2014/09/15 职场文书
辩护意见书
2015/06/04 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书