javascript: iframe switchSysBar 左欄打開關閉,兼容各瀏覽器操作(edit)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="x5-orientation" content="portrait">	
<title>關閉左側欄</title>
<meta name="author" content="geovindu,Geovin Du,涂聚文"/>
 <script language="javascript" type="text/javascript">
		var screenW = 640, screenH = 480;
		if (parseInt(navigator.appVersion)>3) {
		 screenW = screen.width;
		 screenH = screen.height;
		}
		else if (navigator.appName == "Netscape" 
		    && parseInt(navigator.appVersion)==3
		    && navigator.javaEnabled()
		   ) 
		{
		 var jToolkit = java.awt.Toolkit.getDefaultToolkit();
		 var jScreenSize = jToolkit.getScreenSize();
		 screenW = jScreenSize.width;
		 screenH = jScreenSize.height;
		}
		
		function switchSysBar(){

			if(document.getElementById("frmMenu").style.display == "none"){
				var iswitch = "img/arrow01.png";
				var switchhtml = "<img border=\"0\" Title=\"關閉左側欄\" style=\"cursor:hand;\" src=\"" + iswitch + "\"/>";				
				switchPoint.innerHTML = switchhtml;
                                document.getElementById("switchbar").width="5px";
				document.getElementById("frmMenu").style.display = "";
			}
			else{
				var iswitch = "img/arrow02.png";
				var switchhtml = "<img border=\"0\" Title=\"打開左側欄\" style=\"cursor:hand;\" src=\"" + iswitch + "\"/>";
                 switchPoint.innerHTML = switchhtml;
				document.getElementById("switchbar").width="5px";				
				document.getElementById("frmMenu").style.display = "none";
				document.getElementById("frmMenu").width="180px";
			}
		}
	</script>	
</head>

<body>
	
       <table id="maintable" height="100%" width="100%" cellSpacing="0" cellPadding="0" align="left" border='0'>
	    	<tr>
	    		<td width="100%" height="80" colspan="3" valign="top">
	    			<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="344"><img src="img/index_r1_c1.jpg" style="width:344px; height:53px;" alt=""/></td>
                <td style="text-align: center; padding-top: 17px;"> </td>
                <td width="190"><img src="img/index_r1_c15.jpg" style="width:190px; height:53px;"  alt=""/></td>
                <td width="145"><img src="img/index_r1_c19.jpg" style="width:145px; height:53px;"  alt=""/></td>
              </tr>
            </table>
             <table width="100%" border="0" cellpadding="0" cellspacing="0" background="img/index_r2_c10.jpg">
                <tr>
                    <td id="Tab" style="float:left; background-image:url('img/index_r2_c10.jpg')">
                        <a id="HyperLink1" title="內聯網首頁" href="Default.aspx">主頁</a>    <span id="lblDate">今天日期:2022/2/17 Thursday</span>    <span id="Label1">深圳寫字樓:塗聚文</span></td>
                    <td style="width: 10%"><img src="img/index_r2_c19.jpg" style="width:145px; height:37px;" alt="" /></td>
                </tr>
            </table>
	    		</td>
	    	</tr>
	       	<tr valign="top">
	         	<td id="frmMenu" style="background-color:#faecd1;width:40px;height:auto;"  noWrap>
		         	<iframe name="navigate" src="menu.html" style="HEIGHT: 100%; VISIBILITY: inherit; Z-INDEX: 2"frameborder="0" scrolling="yes" marginwidth="0"></iframe>
	         	</td>
	         	<td id="switchbar" style="background-color:#faecd1;width:0.1px; border-right:#FF0000 dotted 0.1px;" valign="middle">
		         	<a onclick="javascript:switchSysBar();" id="switchPoint">
		         		<img id="Img1" style="cursor:hand;" src="img/arrow01.png" alt="關閉左側欄" title="關閉左側欄"/>
		         	</a>
				</td>
	         	<td valign="top" width="100%">	         	  
	         		<iframe id="L_WorkArea"  name="L_WorkArea" src="main.html"  frameborder="0" scrolling="yes" marginwidth="0" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 2"></iframe>
				</td>
	       	</tr>
	       	<tr>
	    		<td width="100%" height="20" colspan="3" valign="top">
	    		</td>
	    	</tr>
		</table>
	
</body>
</html>

  

上一篇:使用js实现一个复利计算器的HTML网页


下一篇:js之DOM操作