JS实现iframe自适应高度的方法(兼容IE与FireFox)
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了JS实现iframe自适应高度的方法,涉及javascript与iframe交互动态操作页面元素属性的相关技巧,需要的朋友可以参考下
本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考,具体如下
之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了。后来狼蚁网站SEO优化这段代码终于被我从万千号称兼容FF的代码堆中翻了出来。我已经用过了,真的好用。尤其是对于我这样的JS水平较低(真不好意思)的人来说,这段代码简单易懂,方便修改,只要把狼蚁网站SEO优化的代码复制粘贴到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..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程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程