自动适应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 相关文章推荐
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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 中include()与require()的对比
2006/10/09 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php取出数组单个值的方法
2018/03/12 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Python实现控制台进度条功能
2016/01/04 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
客服文员岗位职责
2013/11/29 职场文书
文明班集体申报材料
2014/05/23 职场文书
学校安全责任书范本
2014/07/23 职场文书
田径运动会通讯稿
2014/09/13 职场文书
房屋维修申请报告
2015/05/18 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
成人成长感言如何写?
2019/08/16 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书