自动适应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 相关文章推荐
angularjs的一些优化小技巧
Dec 06 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
[JS]点出统计器
2020/10/11 Javascript
JS宝典学习笔记(下)
2007/01/10 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
玩转python爬虫之正则表达式
2016/02/17 Python
python的多重继承的理解
2017/08/06 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
使用numba对Python运算加速的方法
2018/10/15 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
python 生成器需注意的小问题
2020/09/29 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
竞选大队长演讲稿
2014/04/29 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
论群众路线学习笔记
2014/11/06 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
商业计划书之服装
2019/09/09 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server