1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6
7 <style type="text/css">
8 div{
9 cursor: pointer;
10 }
11 </style>
12
13 </head>
14 <body>
15 <div id="button1">
16 打開 17 </div>
18
19 <div id="button2">
20 關閉 21 </div>
22 </body>
23
24 <script type="text/javascript">
25
26 console.log("瀏覽器窗口左上角相對於當前屏幕左上角的水平距離" + window.screenLeft); 27 console.log("返回瀏覽器窗口左上角相對於當前屏幕左上角的垂直距離" + window.screenTop); 28 // screenLeft screenTop不兼容火狐瀏覽器
29 console.log("火狐-水平" + window.screenX); 30 console.log("火狐-垂直" + window.screenY); 31 // screenX screenY在 IE 瀏覽器是不兼容的
32
33 /*要獲取瀏覽器左上角相對於屏幕左上角的水平距離(要求在任何瀏覽器均可以使用)*/
34 var distance; 35 if (typeof window.screenLeft == "number") { 36 distance = window.screenLeft; 37 }else{ 38 distance = window.screenX; 39 } 40
41
42 console.log("返回網頁在當前窗口中可見部分的高度,包含滾動條高度" + window.innerHeight); 43 console.log("瀏覽器窗口高度,包含瀏覽器菜單和邊框" + window.outerHeight); 44
45 /*注意:innerHeight innerWidth outerHeight outerWidth 46 不支持IE9如下*/
47
48 // 打開與關閉瀏覽器窗口
49
50 var button1 = document.getElementById("button1"); 51 button1.onclick = function(){ 52 window.open("http://www.baidu.com","gxm","width=200,height=200,top=20,left=20",false); 53
54 } 55
56 var button2 = document.getElementById("button2"); 57 button2.onclick = function(){ 58 window.close(); 59 } 60
61 // open 函數能夠跟4個參數
62 // 一、指定須要打開新窗口的鏈接(沒有則打開一個空白頁(blank))
63 // 二、爲新打開的窗口起一個名字(用來惟一標示這個窗口)
64 // 三、能夠指定窗口的大小等一些屬性
65 // 四、是否可以從本地緩存加載(是否須要使用歷史記錄)
66
67 // 若是第二個參數有重複,則不打開新的窗口。刷新存在的那個窗口
68 // 第四個參數須要注意:只有在不打開新窗口的前提下,纔有效(決定是否要使用歷史記錄,瞭解便可)
69 // 第三個參數,之間不能夠出現空格,多個屬性利用逗號隔開
70
71
72
73
74
75 </script>
76 </html>