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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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编写的导航条程序
2006/10/09 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
php实现的双向队列类实例
2014/09/24 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
JavaScript库 开发规则
2009/01/31 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
九步学会Python装饰器
2015/05/09 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python实现高斯投影正反算方式
2020/01/17 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
幼儿园实习自我鉴定
2013/12/15 职场文书
安全生产投入制度
2014/01/29 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
护士年终个人总结
2015/02/13 职场文书
2015年党小组工作总结
2015/05/26 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书