JS BOM(html)

时间 2019-12-08
标签 bom html 栏目 JavaScript 繁體版
原文原文链接
 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>