自动适应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游戏之是男人就下100层代码打包
Nov 08 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
js格式化时间的简单实例
Nov 27 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
vue插槽slot的理解和使用方法
Apr 03 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
微信小程序 自己制作小组件实例详解
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 SQL防注入代码集合
2008/04/25 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
Python中optparser库用法实例详解
2018/01/26 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
python实现图片中文字分割效果
2019/07/22 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技