2012-11-30 63 views
0

我正在构建一个网页,我需要制作不同的部分,并且我希望页面可以调整高度以适应在某个时刻查看的部分。 这是实现这一目标的最佳方式? 我试图借助iframe和目标开如何使iframe调整高度以适应内容

<a href="/example" target="myframe"> 

做到这一点,但我不能让IFRAME调整beeing显示的内容。

任何帮助将preprecciated! 在此先感谢

我想要的是一个窗口,从页面底部展开,只要有人点击“更多信息”。 我以为我可以用一个iframe

+0

我编辑我的目的...所以也许有人可以提出一个更好的主意 – fpolloa

回答

0

我发现这个解决方案,它完美地解决了我的问题!它甚至可以选择宽度调整。

<script type='text/javascript'> 

function setIframeHeight(iframeId) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/ 
{ 
var ifDoc, ifRef = document.getElementById(iframeId); 

try 
{ 
ifDoc = ifRef.contentWindow.document.documentElement; 
} 
catch(e) 
{ 
    try 
    { 
    ifDoc = ifRef.contentDocument.documentElement; 
    } 
    catch(ee) 
    { 
    } 
} 

if(ifDoc) 
{ 
    ifRef.height = 1; 
    ifRef.height = ifDoc.scrollHeight; 

    /* For width resize, enable below. */ 

    // ifRef.width = 1; 
    // ifRef.width = ifDoc.scrollWidth; 
} 
} 

</script> 

<iframe id = "myIframe" onload = "setIframeHeight(this.id)"> 

我在这里找到:http://www.sitepoint.com/forums/showthread.php?747398-IFRAME-Auto-Height

1

这部作品实现它在所有浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>auto iframe height adjust</title> 
<style> 
</style> 
<script type="text/javascript"> 
<!--// 
function sizeFrame() { 
var F = document.getElementById("myFrame"); 
if(F.contentDocument) { 
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome 
} else { 
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome 
} 
} 
window.onload=sizeFrame; 
//--> 
</script> 
</head> 
<body> 

一个iframe的浏览器是查看这个网站需要 。

+0

它没有工作..我应该添加一些东西到IFRAME body标签? – fpolloa

+0

这是我的iframe标记: