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 // 1、指定需要打开新窗口的连接（没有则打开一个空白页（blank））
63 // 2、为新打开的窗口起一个名字（用来唯一标示这个窗口）
64 // 3、可以指定窗口的大小等一些属性
65 // 4、是否能够从本地缓存加载（是否需要使用历史记录）
66
67 // 如果第二个参数有重复，则不打开新的窗口。刷新存在的那个窗口
68 // 第四个参数需要注意：只有在不打开新窗口的前提下，才有效（决定是否要使用历史记录，了解即可）
69 // 第三个参数，之间不可以出现空格，多个属性利用逗号隔开
70
71
72
73
74
75 </script>
76 </html>