|
Iframe尤其是不带边框的Iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是Iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给Iframe设置高度的时候多了也不好，少了更是不行。
JS获取高度
我们可以编写下面的函数，最后返回Iframe框架的高度。
function SetCwinHeight(){
var cwin=document.getElementById("cwin");
if (document.getElementById){
if (cwin && !window.opera){
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
cwin.height = cwin.contentDocument.body.offsetHeight;
else if(cwin.Document && cwin.Document.body.scrollHeight)
cwin.height = cwin.Document.body.scrollHeight;
}
}
}
最后加入Iframe不能丢掉Onload属性，当然了ID也必须也函数中的Cwin匹配
<iframe width="778" align="center" height="200" id="cwin" name="cwin" onload="Javascript:SetCwinHeight()" frameborder="0" scrolling="no"></iframe>
计算卷去的高度
假设我们的子页面也就是被引入框架的页面有如下的代码，假设这个页面的名称为temp.html
<body onLoad="parent.setSize(getSize())">
<table width="100" height="660" bgcolor="#FFCC66">
<tr>
<td></td>
</tr>
</table>
<div id="PageEnd" style="position:relative"></div>
<script>
function getSize(){
return document.getElementById("PageEnd").offsetTop
}
</script>
</body>
而我们的主页面可以这样编写
<script language="JavaScript" type="text/JavaScript">
function setSize(theHeight){
document.all.ifrm.height=theHeight+12;
}
</script>
<iframe id="ifrm" width="100%" height="0px" scrolling="no" src="temp.htm"></iframe>
自适应高度
假设页面中包含iframe的部分代码如下：
<iframe id="test" name="test" frameborder=0 scrolling=no src="/u/1463420203" width="100%" height=0></iframe>
方法一
在页面中加入
<script for=window event=onload language="jscript">
document.all("test").height=test.document.body.scrollheight;
</script>
自适应宽度类似在Script中加入
document.all("test").width=test.document.body.scrollwidth;
方法二
建立一个bottom.js的文件，然后输入下面的代码（只有两行哦）
parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth;
这里的 框架ID名 就是Iframe的ID，比如：
<iframe id="框架ID名" name="left" frameBorder=0 scrolling=no src="demo.asp" width="100%"></iframe>
给你网站里所有的被包含文件里面每个都加入
<script language = "JavaScript" src = "bottom.js"/></script>
Iframe自适应高度
输入你希望根据页面高度自动调整高度的iframe的名称的列表，用逗号把每个iframe的ID分隔，例如: [“myframe1”, “myframe2”]，可以只有一个窗体则不用逗号。
//定义iframe的ID
var iframeids=["content"]
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"
function dyniframesize(){
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementByIdx_x){
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementByIdx_x(iframeids[i]);
if (dyniframe[i] && !window.opera){
dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementByIdx_x) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementByIdx_x(iframeids[i])
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
|
