深圳网站建设-深圳做网站

iframe高度自适应的多种方法总结

来源:深圳网站建设 发布时间:1/24/2015 9:55:30 AM 浏览次数:

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,深圳网站建设告诉大家一种iframe动态调整高度的方法,主要是以下JS函数: 

第一种方法:代码简单,兼容性还可以,大家可以先测试下。

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 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。 

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代码: 
<script type="text/javascript" language="javascript"> 
function iFrameHeight() { 
var ifm= document.getElementById("iframepage"); 
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; 
if(ifm != null && subWeb != null) { 
ifm.height = subWeb.body.scrollHeight; 


</script> 

另一种情况的iframe解决方案(超简单) 
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的) 
之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下 
1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)

parent.document.all("框架ID名").style.height=document.body.scrollHeight; 
parent.document.all("框架ID名").style.width=document.body.scrollWidth;