JS BOM(html)

 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>
相關文章
相關標籤/搜索