JS BOM(html)

Posted Powell Zhao

tags:

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

 

以上是关于JS BOM(html)的主要内容,如果未能解决你的问题,请参考以下文章

前端入门06——BOM与DOM

js Bom Dom

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

前端知识-JavaScript

JS BOM(html)