浏览器对象模型（BOM，Browser Object Model）

本文内容

    1.概述

    2.windows与document

    3.对话框

    4.定时调用

    5.URL解析与访问历史

    6.浏览器和屏幕信息

---

★概述

    “浏览器对象模型（Browser Object Model，BOM）”是由浏览器实现的可供JavaScript程序调用的一组对象，通过它们，Web开发与设计者使用JavaScript代码可以完成与“控制”浏览器进程相关的许多工作。

    BOM由一系列相关的对象构成，其中Window对象使整个BOM的核心，其他对象和集合对象都是window对象的属性。

  BOM中定义了6种重要的对象：

 

    1.window对象表示浏览器中打开的窗口；

    2.document对象表示浏览器中加载页面的文档当对象；

    3.location对象包含了浏览器当前的URL信息；

    4.navigator对象包含了浏览器本身的信息；

    5.screen对象包含了客户端屏幕及渲染能力的信息；

    6.history对象包含了浏览器访问网页的历史信息；

                

 

★window与document对象

     顶层对象window

        1.在浏览器宿主环境下，window对象就是JavaScript的Global对象，因此使用window对象的属性和方法是不需要特别指明的。例如我们经常使用的alert方法，实际上完整的调用形式应该是'window.alert'，通常情况下我们在代码中会省略window对象的声明，直接使用其方法。

        2.除了window对象之外，其他的5个对象都是window对象的属性。

        window对象的主要属性

 

window对象的主要方法

 window对象的主要功能

   window对象对应着Web浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window对象提供主要功能可以分为以下5类：

    （1）调正窗口大小和位置；

    （2）打开新窗口；

    （3）显示系统提示框；

    （4）在状态栏上显示信息；

    （5）实现实时操作；

     document对象

      document对象是代表浏览器当前所装入的文档，包含所有文档中的内容。document对象既属于BOM，有时访问DOM树的入口。

        document的属性

document对象应用实例

 

开发提示：

    现在的网站开发中，已经越来越少地直接使用windows对象打开新窗口了，更多是使用<a href="..." target="_blank || _self">来打开。另外许多网站使用新窗口来显示各种烦人的广告，因此，有些浏览器可能会禁止弹出新窗口，导致新窗口显示不出来！

                                        

 

★对话框

    window对象提供了3个方法(alert,confirm,prompt)向用户显示简单的对话框，显示的信息以纯文本字符串表示，并且是阻塞式调用（即必须关闭它才能执行下一步的代码）。

 

 

状态栏控制 

   每个浏览器的窗口底部都会有一个状态栏，用来向用户显示一些特定的消息。状态栏可用于提示何时正在载入页面，何时完成载入页面等信息。可以用window对象的两个属性设置它的值，即status和defaultStatus属性。status可以暂时改变状态栏的文本，而defaultStatus则可以在用户离开当前页面前一直改变该文本。

   比如第一次载入页面时，可使用默认的状态信息：

1. window.defaultStatus="Welcome to my WebPage!";

                                         

★定时调用

 定时操作通常有两种使用目的：

    1.一种是周期性地执行脚本，例如在页面上显示时钟，需要每隔一秒钟更新一次；

    2.另一组则是将某个操作延时一段时间执行，例如某个特别耗时的操作，可以使用window.setTimeout函数使其延时执行，而后面的脚本可以继续运行无需等待。

具体语法

应用代码示例：

1. //延时调用
2. window.setTimeout(alert("2s later"),2000);
3. window.setTimeout(function(){alert("2s later")},2000);
4. //以上这两句代码的效果是相同的（两秒后弹出提示窗口）
5. var timer=window.setTimeout(alert("2s later"),2000);
6. //声明变量timer来存储延时函数，便于以后对定时操作的删除
7. window.clearTimeout(timer);
8. //清除定时器

掌握定时调用的编程技巧

1.时间间隔与暂停的运行方式相似，只是它无限次地每隔指定的时间段就重复一次制定的代码，可调用setInterval方法设置时间间隔，它的参数与setTimeout相同，是要执行的代码和每次执行之间等待的毫秒（ms）；

2.setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，直到clearTimeout()被调用或窗口被关闭。由setInterval返回的ID值可用作clearInterval()方法的参数。因为如果不取消时间间隔，就会一直执行它，直到页面被卸载为止。

示例应用：利用定时器显示当前时间

1. <h2>ShowCurrentTime</h2>
2. <time id="ShowCurrentTime"></time>
3. <hr/>
4. <button onclick="ShowTime()">ShowTime</button>
5. <button onclick="StopTime()">StopTime</button>
7. <script>
8. //获取时间并向页面输出
9. function getTime(){
10. var time=document.getElementById('ShowCurrentTime');
11. if(1){
12. time.innerHTML="Now:"+(newDate()).toLocaleTimeString();
13. }
14. }
15. //利用window.setTimeout( )显示提示框
16. varIntervalID;
17. functionShowTime(){
18. IntervalID=window.setInterval(getTime,1000);
19. setTimeout("alert('隔3秒后弹出此消息框，只显示一次。')",3000);//这句代码中的执行代码，会如期在3s后执行
20. /*setTimeout(alert("3s later and it disappears only once！"),2000); *///这条语句其中的执行代码会立即执行而不会等到2s后执行
21. }
22. functionStopTime(){
23. window.clearInterval(IntervalID)
24. }
25. </script>

                                                    

★URL解析与访问历史

   location对象的属性

 示例：显示location对象属性值

1. <h2>使用location对象</h2>
2. <hr/>
3. <scripttype="text/javascript">
4. document.open();//新建HTML文档
5. document.writeln("location.href="+ window.location.href);
6. document.writeln("<br /> window.location.protocal="+ window.location.protocol);
7. document.writeln("<br /> window.location.host="+ window.location.host);
8. document.writeln("<br /> window.location.pathname="+ window.location.pathname);
9. document.writeln("<br /> window.location.search="+ window.location.search);
10. document.close();//关闭HTML文档
11. </script>

location对象的方法

    1.assign()方法，加载新文档；

    2.reload()方法，重新加载当前文档；

    3.replace方法，用新文档替换当前文档；

区别：如果不想让脚本的页面能从浏览器历史中访问。可使用replace()方法。该方法所作的操作与assign()相同,但它多了一步操作，即从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的后退和前进按钮访问它。

示例

1. <h2>Location 对象的方法</h2>
2. <hr/>
3. <buttononclick="window.location.assign('http://www.baidu.com')">assign</button>
4. <p>方法assign结合语句window.location.assign('http://www.baidu.com')实现百度跳转</p>
5. <buttononclick="window.location.reload()">reload</button>
6. <p>方法reload结合语句window.location.reload()实现<mark>重新载入当前文档</mark></p>
7. <buttononclick="window.location.replace('http://www.baidu.com')">replace</button>
8. <p>方法replace结合语句window.location.replace('http://www.baidu.com')实现百度跳转，<mark>并且不能够返回</mark></p>

history对象的常用属性和方法

   history对象用于保存用户访问过的站点的列表。

补充：由于安全原因，JavaScript不能得到浏览器历史中包含的页面的URL，只能是实现在历史记录间导航。

示例

加载页面的几种方式  

1. <!--超级链接-->
2. <ahref="#"target="_blank">页面</a>
4. <!--在新窗口加载页面，可以设置新窗口的相关属性-->
5. window.open("#","name","options")
7. <!--加载页面，并且历史记录中保存相关信息-->
8. document.URL="#"和location.href="a.html"
10. <!--注意replace方法加载页面，在浏览器记录中不保存相关网页信息-->
11. location.replace("#")和location.assign("#")

                                                           

 

★ 浏览器和屏幕信息

 navigator对象

   navigator对象包含了关于Web浏览器的信息，浏览器的类型，版本信息都可以从该对象获取。

screen对象的常用属性

 示例

1. <script>
2. document.open();
3. document.write("屏幕宽度是："+ window.screen.width +"<br/>");
4. document.write("屏幕高度是："+ window.screen.height +"<br/>");
5. document.write("屏幕色深是："+ window.screen.colorDepth +"<br/>");
6. document.write("屏幕可用宽度是："+ window.screen.availWidth +"<br/>");
7. //可用高度是除去任务栏以后的高度
8. document.write("屏幕可用高度是："+ window.screen.availHeight +"<br/>");
9. document.close();
10. </script>

 

小结：基于浏览器对象模型（BOM）编程主要使用JavaScript访问这些对象的相关属性和调用它们的相关方法。

    1.不同浏览器提供的BOM可能有些差异，需要进行实地的测试；

    2.在实际开发中，现在很少需要直接编码操纵BOM，多采用jQuery、Bootstrap等成熟稳定的前端框架完成相应的工作。

 

 

 

 

 

 

 

 

 

来自为知笔记(Wiz)