自动适应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实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
js实现下拉菜单效果
Mar 01 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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代码保护--Zend Guard的使用详解
2013/06/03 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
JS实现拖动示例代码
2013/11/01 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
js动态引入的四种方法
2018/05/05 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
python代码实现ID3决策树算法
2017/12/20 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Django之form组件自动校验数据实现
2020/01/14 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
被委托人身份证明
2015/08/07 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript