自动适应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实现预览待上传的本地图片
Mar 15 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
BootStrap中的表单大全
Sep 07 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
vue实现动态数据绑定
Apr 28 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP关联链接常用代码
2012/11/05 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php数组随机排序实现方法
2015/06/13 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
Python列表计数及插入实例
2014/12/17 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
如何在python中使用selenium的示例
2017/12/26 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
基于Python实现天天酷跑功能
2021/01/06 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
Ref与out有什么不同
2012/11/24 面试题
销售主管竞聘书
2014/03/31 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
靠谱的活动总结
2019/04/16 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python