用DOM和Javascript自由控制frame
Friday, 14. July 2006, 07:56:25
这里有一个左侧固定，上方嵌套的框加集，很多程序的后台管理页面都采用这种形式。废话少说，贴代码如下，各位根据自己的需要更改。（不要说代码烂，这里只是提供演示用，对于其他问题请参看DOM相关手册）
为了演示方便，只提供两个文件，框加集文件index.htm，框架内文件main.htm，文件的代码如下：
通过IE5，IE6，FireFox1.5.04，Opera9.00检测可执行。
相关资源：DOM参考
index.htm
main.htm
2006.07.17修正部分代码，打包下载修正版本。frame.rar
为了演示方便，只提供两个文件，框加集文件index.htm，框架内文件main.htm，文件的代码如下：
通过IE5，IE6，FireFox1.5.04，Opera9.00检测可执行。
相关资源：DOM参考
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>frame demo</title>
</head>
<frameset id="Pz_frame" rows="*" cols="80,*" frameborder="yes" border="1" framespacing="0">
<frame src="main.htm" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frameset id="Pz_Leftframe" rows="80,*" frameborder="yes" border="1" framespacing="0">
<frame src="main.htm" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="main.htm" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>
main.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Frame</title>
<script type="text/javascript">
function CloseFrames(obj){
if (obj==0){
fs = top.document.getElementById("Pz_frame");
fs.cols = "0,*";}
if (obj==1){
fs1 = top.document.getElementById("Pz_Leftframe");
fs1.rows = "0,*";}
if (obj==2){
fs2 = top.document.getElementById("Pz_Leftframe");
fs2.rows = "*,0";}
}
function OpenFrames(obj){
if (obj==0){
fs = top.document.getElementById("Pz_frame");
fs.cols = "80,*";}
if (obj==1){
fs1 = top.document.getElementById("Pz_Leftframe");
fs1.rows = "80,*";}
if (obj==2){
fs2 = top.document.getElementById("Pz_Leftframe");
fs2.rows = "80,*";}
}
</script>
</head>
<body>
<p><a href="javascript:CloseFrames(0);">关闭左栏</a> <a href="javascript:CloseFrames(1);">关闭上栏</a> <a href="javascript:CloseFrames(2);">关闭下栏</a></p>
<p><a href="javascript:OpenFrames(0);">打开左栏</a> <a href="javascript:OpenFrames(1);">打开上栏</a> <a href="javascript:OpenFrames(2);">打开下栏</a></p>
</body>
</html>
2006.07.17修正部分代码，打包下载修正版本。frame.rar
WIDGETIZE