自动适应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 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
Move.js入门
Feb 08 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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脚本数据库功能详解(下)
2006/10/09 PHP
php Session存储到Redis的方法
2013/11/04 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
python之yield表达式学习
2014/09/02 Python
超简单使用Python换脸实例
2019/03/27 Python
深入解析神经网络从原理到实现
2019/07/26 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
python程序如何进行保存
2020/07/03 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
英文翻译的自我评价语句
2013/10/04 职场文书
yy结婚证婚词
2014/01/10 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
模范教师事迹材料
2014/02/10 职场文书
化妆品店促销方案
2014/02/24 职场文书
项目施工员岗位职责
2014/03/09 职场文书
个人银行贷款担保书
2014/04/01 职场文书
大三学习计划书范文
2014/05/02 职场文书
法制宣传教育方案
2014/05/09 职场文书
承兑汇票延期证明
2015/06/23 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android