自动适应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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
Vue.js实现价格计算器功能
Mar 30 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
小程序云开发之用户注册登录
May 18 Javascript
微信小程序实现轮播图指示器
Jun 25 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
layui实现数据分页功能
2019/07/27 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
python之PyMongo使用总结
2017/05/26 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python队列Queue的详解
2019/05/10 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
骨干教师考核方案
2014/05/09 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB