008 BOM

一：说明

1.说明

　　浏览器对象模型

2.顶级对象

　　浏览器中的顶级对象是window

　　页面中的顶级对象是document

　　因此：

　　　变量属于window的，函数也是window的。

　　　就可以使用window.变量，window.函数。

3.window的另一个名字

　　top=window

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <script>
 9     var name="tom";
10     console.log(top.name);
11 </script>
12 </body>
13 </html>

4.系统的对话框

　　都不建议使用，一是外表都不同，影响加载。

　　window.alert("mnmnmn")

　　window.prompt("输入:");

　　var result = window.confirm(); true或者false是返回值

二：加载事件

1.页面加载完成之后触发的事件

1 window.onload=function () {
2         
3 }

2.扩展事件

　　事件关闭之前触发：onbeforeunload

　　页面关闭后才触发：onunload

三：Location对象

1.说明

　　是地址栏

　　可以设置和获取URL

2.程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         console.log(window.location);
10     </script>
11 </body>
12 </html>

　　效果：

3.示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="显示" id="btn">
 9     <script>
10         console.log(window.location.hash);     //#，以及之后的内容
11         console.log(window.location.host);     //主机名及端口号
12         console.log(window.location.hostname);
13         console.log(window.location.pathname);
14         console.log(window.location.port);
15         console.log(window.location.protocol);
16         console.log(window.location.search); //搜索的内容
17 
18         onload=function () {
19             document.getElementById("btn").onclick=function () {
20                 location.href="https://www.baidu.com";     //属性：设置跳转的地址，有后退
21                 location.assign("https://www.baidu.com");  //方法，与上面的相同，有后退
22                 location.reload(); //刷新
23                 location.replace("https://www.baidu.com");  //没有后退，因为没有历史记录
24             }
25         }
26     </script>
27 </body>
28 </html>

猜你喜欢