自动适应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 到 JQuery (1)学习小结
Feb 12 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php自动加载方式集合
2016/04/04 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Angular的$http与$location
2016/12/26 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
JS中的作用域链
2017/03/01 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
ASP.NET Core中的配置详解
2021/02/05 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
党风廉政承诺书
2014/03/27 职场文书
小区推广策划方案
2014/06/06 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
导游词欢迎词
2015/02/02 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
Python中的变量与常量
2021/11/11 Python