ZPYJ.COM 中文站

所属分类: 作品研究网 > 编程知识  关键词: 自适应高度

由于html没有include或require，做网页时我们会用iframe来达到包含页面的目的。如果调用的iframe页面高度会根据内容多少而发生变化，这时通常要保持iframe与内容页面的高度，以避免出现iframe的滚动条。

先搜索了一下，有不少好的例子，但总觉得说的还不够明了。下面给出详细例子：

1，创建页面 test.html 。 页面中含有一个 iframe，name为 ifrname ，id为 ifrid， src 为 iframe.html页面。
 iframe src="ifarme.html" name="ifrname" height="" style="" onload="" id="ifrid"  scrolling="" /iframe


2，创建 iframe.html 页面，里面含有一些内容。
p
这是iframe页面，通过在父窗口页面或子页面添加JS来自动更改宽高，以适应内容的多少。
/p 

要想使iframe自动适应宽和高，可以在 test.html 页面iframe onload处增加一些JS代码。如：
  iframe src="ifarme.html" name="ifrname" height="" style="" onload="this.height =  document.frames["ifrname"].document.body.scrollHeight" id="ifrid"  scrolling=""/iframe


这样iframe即可以自动适应高度了。如果不在onload处增加js，那也可以放到页面上来调用。比如写个函数。

script
 function setAutoHeight(iframeElement,  iframeWindow) {

iframeElement.style.height = iframeWindow.document.body.scrollHeight;
iframeElement.style.width  =  iframeWindow.document.body.scrollWidth  ;

// 或者
// iframeElement.height = iframeWindow.document.body.offsetHeight ;
// iframeElement.width  =  iframeWindow.document.body.offsetWidth;
 
}
//调用函数setAutoHeight();
setAutoHeight( document.getElementById("iframeid"), window.frames[0]  );
/script

这样也可以达到自适应高宽的目的，在这里要注意的是，iframeElement参数必须是 document.getElementById("iframeid")， iframeWindow参数是 window.frames[0] 或document.frames["ifrname"]。 这是因为通过name得到的对象是窗口(window)对象，非窗口里的iframe对象。同时document.getElementById("iframeid)不能像window对象可以得到window.document。

所以这里最好给iframe分别加上name和id，id用来更改宽高样式属性，name用来执行window相关事件如location.href，document.write。bgColor例外，元素对象和窗口对象都可以得到，这是因为他们都有这个属性。

如果要隐藏iframe滚动条，可以设置iframeWindow.scrolling = "no";但这不能兼容多个浏览器，用iframeElement.document.body.style.overflow = "hidden";这种或直接在iframe处增加scrolling="no" html代码就可以很好地兼容了。

3，如果不能修改父页面，而只能把代码增加在iframe页面里呢？
可以写个类似函数，放在iframe页面里：

script
function setAutoHeight( parentIframeElement, slefDocument ){

slefDocument.style.overflow = "hidden";          // 隐藏全部滚动条
// document.body.style.overflowY = "hidden";  // 没有竖滚动条

parentIframeElement.style.height = slefDocument.scrollHeight;
parentIframeElement.style.width  =  slefDocument.scrollWidth;

}

// 在页面最后执行
setAutoHeight(parent.document.getElementById("ifrid"), document.body);

// 或onload时执行
//window.onload = function() {
//   setAutoHeight(parent.document.getElementById("ifrid"), document.body);
//}

// 或者超时执行
// setTimeout(
//   function() {
 //     setAutoHeight(parent.document.getElementById("ifrid"), document.body);
 //  }, 
 // 200 );
/script


4，在线通过iframe更改父窗口里iframe的宽高，因为安全原因会有跨域的问题，若是不在同一域名，那是被禁止的。如果同在一个域名下，但2级域名不同，比如a.yourcompany.com 和b.yourcompany.com。

这时可以通过重新设置document.domain 来跨越2级域名。

var domain = "yourcompany.com";
try {

   if( document.domain.indexOf(domain)  != -1 ) {
     document.domain = domain;                  // set new document.domain;
   }

} catch (ex) {
   alert("error: " + ex.toString() );
}

如果域名含有yourcompany.com，则改将document.domain改为yourcompany.com。 




Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1944458

5.
//** 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.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(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.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(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