自动适应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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
js实现小时钟效果
Mar 25 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
Html5生成验证码的示例代码
May 10 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
微信小程序 自己制作小组件实例详解
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
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python 备份程序代码实现
2017/03/06 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
python代码中怎么换行
2020/06/17 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
西北政法大学自主招生自荐信
2014/01/29 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
初中作文评语大全
2014/04/23 职场文书
影视后期实训报告
2014/11/05 职场文书
2014年仓库工作总结
2014/11/20 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
顶岗实习协议书
2015/01/29 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
利用python做表格数据处理
2021/04/13 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL