自动适应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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
vue路由实现登录拦截
Mar 24 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
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
jquery tab标签页的制作
2010/05/10 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
13个PHP函数超实用
2015/10/21 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
python实现统计代码行数的方法
2015/05/22 Python
Python微信库:itchat的用法详解
2017/08/14 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python流程控制 if else实现解析
2019/09/02 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python request post上传文件常见要点
2020/11/20 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
2015年法制宣传月活动总结
2015/03/26 职场文书
婚宴新郎致辞
2015/07/28 职场文书
初中语文教师研修日志
2015/11/13 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android