自动适应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与DOM组合动态创建表格实例
Dec 23 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
微信小程序单选框自定义赋值
May 26 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模拟HTTP认证
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
自我评价是什么
2014/01/04 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
主持人演讲稿
2014/05/13 职场文书
道路施工安全责任书
2014/07/24 职场文书
会计岗位工作总结
2015/08/12 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python