iframe自适应宽度和高度，没有滚动条

最新推荐文章于 2024-07-24 10:26:30 发布

艾伦之家

最新推荐文章于 2024-07-24 10:26:30 发布

阅读量2.7k

点赞数

文章标签： iframe javascript firefox null border 浏览器

iframe自适应宽度和高度

支持IE和Firefox浏览器的iframe自适应宽度和高度代码，先确定嵌入页和被嵌入网页加入了以下声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在嵌入页加入以下代码，修改代码中的“test.html”为你的被嵌入页URL即可。

<!--

function TuneHeight(fm_name,fm_id){

var frm=document.getElementById(fm_id);

var subWeb=document.frames?document.frames[fm_name].document:frm.contentDocument;

if(frm != null && subWeb != null){

frm.style.height = subWeb.documentElement.scrollHeight+"px";

//如需自适应宽高，去除下行的“//”注释即可

frm.style.width = subWeb.documentElement.scrollWidth+"px";

}

//-->

</script>

使用方法：

< table style = " height: auto; width: 100%; background-color: #cf0000; " >

< tr >

< td style = " width: 10%; height: 100%; background-color: #cf0000; " valign = " top " >

< iframe onload = " {TuneHeight('left','left');} " src = " test1.aspx " frameborder = " 0 " style = " border-left-width: thin; border-top-style: none; border-right-style: none;

border - bottom - style: none; background - color: #cf0000; " name= " left " id= " left "

width = " 100% " height = " 100% " marginwidth = " 0 " marginheight = " 0 " scrolling = " no " src = " MainMenu.aspx " >

</ iframe >

</ td >

< td style = " background-color: #8c1211; width: 1px " >

|</ td >

< td valign = " top " style = " width: 90%; height: 100%; background-color: #cf0000; " >

< iframe onload = " {TuneHeight('right','right');} " src = " test2.aspx " frameborder = " 0 " style = " border-left-width: thin; background-color: #cf0000; "