HTML 如何设置Iframe自适应高度
Published: 2015-11-13 Updated: 2016-01-03
不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法
方案一
1 2 3 4 5 6 7 8 9 10 11 12 13
| function SetWinHeight(obj) { var win = obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) { win.height = win.contentDocument.body.offsetHeight; } else if (win.Document && win.Document.body.scrollHeight) { win.height = win.Document.body.scrollHeight; } } } }
|
最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配;
方案二
我们看看另一种情况的iframe解决方案
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)现在给大家分享一下:
建立一个bottom.js的文件,然后输入下面的代码;
1 2
| parent.document.all("框架ID名").style.height=document.body.scrollHeight; parent.document.all("框架ID名").style.width=document.body.scrollWidth;
|
给你网站里所有的被包含文件里面每个都加入,在WINXP、IE6下面测试通过;
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
|
var iframeids = ["test"] var iframehide = "yes"
function dyniframesize() { var dyniframe = new Array() for (i = 0; i < iframeids.length; i++) { if (document.getElementById) { dyniframe[dyniframe.length] = document.getElementById(iframeids); if (dyniframe && !window.opera) { dyniframe.style.display = "block" if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) dyniframe.height = dyniframe.contentDocument.body.offsetHeight; else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) dyniframe.height = dyniframe.Document.body.scrollHeight; } } if ((document.all || document.getElementById) && iframehide == "no") { var tempobj = document.all ? document.all[iframeids] : document.getElementById(iframeids) tempobj.style.display = "block" } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false) else if (window.attachEvent) window.attachEvent("onload", dyniframesize) else window.onload = dyniframesize
|
参考资料
HTML教程:如何设置Iframe自适应高度