JS实现iframe自适应高度的方法(兼容IE与FireFox)


Posted in Javascript onJune 24, 2016

本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考,具体如下:

之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了。后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来。我已经用过了,真的好用。尤其是对于我这样的JS水平较低(真不好意思)的人来说,这段代码简单易懂,方便修改,只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面,并且修改一下ID名就行了(注意,要修改的地方有两个,位置在代码中有说明)。

向原创这段代码的朋友致敬。

步骤1:在<body>标签下先输入如下JS代码

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); //将iframe1替换为你的ID名
  var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument;
  if(frm != null && subWeb !=null)
  {
   frm.style.height="0px";//初始化一下,否则会保留大页面高度
   frm.style.height = subWeb.documentElement.scrollHeight+"px";
   frm.style.width = subWeb.documentElement.scrollWidth+"px";
   subWeb.body.style.overflowX="auto";
   subWeb.body.style.overflowY="auto";
  }
}
</script>

步骤2:在iframe标签中加上id="iframe1"onload="adjustFrameSize()"

例如:

<iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" height="300px" target="_self"frameborder="0"></iframe>

这段代码有一个小小的缺点,就是使用后iframe中的内容和外边框(如果存在外边框的话)的距离有点小,可以自己适当调整一下;另外,除IE6.0以上版本和FF以外没有测试过其它浏览器,除此之外尚未发现别的缺陷,如果在使用中发现了问题或者有更好解决方法的童鞋欢迎来分享一下。

如果在iframe页面内部含有ajax加载的页面或者通过js动态去添加内容导致iframe高度变化的情况,可以添加一下方式进行:

1:子页面添加以下内容

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

修改dom的部分调用该方法

2:父页面添加

//高度自适应
var iframe = document.getElementById("iframe1");
function iframeHeight() {
  var hash = window.location.hash.slice(1), h;
  if (hash && /height=/.test(hash)) {
    h = hash.replace("height=", "");
    iframe.style.height = h+"px";
    window.location.hash = "#temp";//防止点击其他页面时高度不变
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
webpack4简单入门实例
Sep 06 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
TS 类型兼容教程示例详解
Sep 23 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 #Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 #Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 #Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 #Javascript
正则表达式(语法篇推荐)
Jun 24 #Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 #Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 #Javascript
You might like
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
用python与文件进行交互的方法
2018/03/01 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
python regex库实例用法总结
2021/01/03 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
旅游管理毕业生自荐信
2013/11/05 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
学习党代会心得体会
2014/09/05 职场文书
2015年党员自评材料
2014/12/17 职场文书
党支部先进事迹材料
2014/12/24 职场文书
小学运动会加油稿
2015/07/22 职场文书