自动适应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 显示当前系统时间代码
Dec 28 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
ios中视频的最后一桢问题解决
May 14 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
Vue提供的三种调试方式你知道吗
Jan 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
我常用的几个类
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/23 PHP
dedecms模版制作使用方法
2007/04/03 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python随机生成库faker库api实例详解
2019/11/28 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
《小松树和大松树》教学反思
2014/02/20 职场文书
普通话演讲稿
2014/09/03 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
个人工作保证书
2015/02/28 职场文书
贷款工资证明范本
2015/06/12 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python