自动适应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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
javascript运动详解
Jul 06 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 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
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
常用DOM整理
2015/06/16 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python模块restful使用方法实例
2013/12/10 Python
Python中关键字is与==的区别简述
2014/07/31 Python
python获取目录下所有文件的方法
2015/06/01 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python celery原理及运行流程解析
2020/06/13 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
《秋姑娘的信》教学反思
2014/02/28 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
2014年环保局工作总结
2014/12/11 职场文书
治庸问责工作总结
2015/08/11 职场文书
护理培训心得体会
2016/01/22 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Python Django ORM连表正反操作技巧
2021/06/13 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python