[JavaScript]如何控制页面框架大小变化

来源:互联网 发布:steam没网络可以玩吗 编辑:程序博客网 时间:2024/05/22 03:52
 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>
    
<title>主界面</title>
    
<OBJECT id="maximize" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" VIEWASTEXT>
        
<PARAM NAME="Width" VALUE="106">
        
<PARAM NAME="Height" VALUE="53">
        
<PARAM NAME="Command" VALUE="MAXIMIZE">
    
</OBJECT>
    
<script language="javascript">
        
if(top.screenLeft>1) maximize.Click()
    
</script>
</head>
<frameset rows="45,*" cols="*" frameborder="no" border="0"  framespacing="0">
<frame  name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" src="head.htm">
<frameset id=M_Frame frameSpacing="0" rows="*" frameBorder="no" cols="200,10,*" border="0">
    
<frame id=LeftFrame     name=LeftFrame         marginWidth=0 marginHeight=0  src="main_left.aspx"  scrolling="auto"     noResize>
    
<frame id=ButtonFrame     name=ButtonFrame     marginWidth=0 marginHeight=0  src="button.htm"     scrolling="no"     noResize>
    
<frame id=MainFrame     name=MainFrame        marginWidth=0 marginHeight=0  src="Welcome.aspx" scrolling="auto"     noResize>
</frameset>

</frameset>
</html>

button.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body 
{
    margin-left
: 0px;
    margin-top
: 0px;
    margin-right
: 0px;
    margin-bottom
: 0px;
    background-color
: #3366ff;
}

.bg1
{
background-color
:#CCFFFF;
border
:1px solid #000000;
}

.bg2
{
background-color
:#FFFFFF;
border
:1px solid #000000;
}

-->
</style>
<script language="javascript">
<!--
var pic=new Array("images/toleft.gif","images/toleft2.gif.gif","images/toright.gif","images/toright2.gif")

var leftorright='leftFrame';

function changeSize(){
    top.M_Frame.cols
=(top.M_Frame.cols=="200,10,*")?"0,10,*":"200,10,*";
    
    
if (leftorright=='leftFrame'){
        document.all.a1.innerHTML
="<img width="8" height="16" src="images/toright.gif" onmouseover="this.src=pic[3]" onmouseout="this.src=pic[2]" onclick="changeSize()"style="cursor:hand" alt="显示列表" >";
        leftorright
='mainFrame';
    }

    
else
    
{
        document.all.a1.innerHTML
="<img width="8" height="16" src="images/toleft.gif" onmouseover="this.src=pic[1]" onmouseout="this.src=pic[0]" onclick="changeSize()"style="cursor:hand" alt="隐藏列表">";
        leftorright
='leftFrame';
    }

}

-->
</script>
</head>
<body>

<table width="80%" height="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
  
<tr>
    
<td align="center" bordercolorlight="#3366ff" bordercolordark="#3366ff">
    
    
     
<table class="bg1" cellpadding="0" cellspacing="0" onMouseMove="this.className='bg2' " onMouseOut="this.className='bg1'  " onMouseDown="this.className='bg1'">
         
<tr>
            
<td height="40" id="a1" >
          
<IMG width="8" height="16" src="images/toleft.gif" alt="隐藏列表"
            onmouseover
="this.src='images/toleft2.gif'"  
            onmouseout
="this.src='images/toleft.gif'"        
            style
="CURSOR: hand" onclick=changeSize() ></td>
        
</tr>
     
</table>
     
    
</td>
  
</tr>
</table>

</body>
</html>

原创粉丝点击