浏览器对象模型BOM

1.BOM简介

       IE4.0和Netscape Navigator4.0提供了一种特性——BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。BOM提供了独立于内容而与浏览器窗口进行交互的对象。

       BOM主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript扩展都被看作BOM的一部分。这些扩展包括：

       1）弹出新的浏览器窗口、移动、关闭浏览器窗口以及调整窗口大小；

       2）提供Web浏览器详细信息的导航对象；

       3）提供装载到浏览器中页面的详细信息的定位对象；

       4）提供用户屏幕分辨率详细信息的屏幕对象；

       5）对cookie的支持；

2.BOM的相关对象

       1）window对象

       ①窗口操作

         window对象对操作浏览器窗口非常有用。这意味着，开发者可以移动或调整浏览器窗口的大小。可用四种方法实现这些操作：

         a.  moveBy（dx,dy）——把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负数，向左移动窗口，dy值为负数，向上移                 动窗口。

         b.  moveTo（x,y）——移动浏览器窗口，使它的左上角位于用户屏幕的（x,y）处。可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。

         c.  resizeBy（dw,dh）——相对于浏览器窗口的当前大小，把它的宽度调整dw个像素，高度调整dy个像素。dw为负数，缩小窗口的宽度，dy为                  负数，缩小窗口的高度。

         d. resizeTo（w,h）——把窗口的宽度调整为w，高度调整为h。不能使用负数。

       2）导航和打开新窗口

          用JavaScript可以导航到指定的URL，并用window.open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的URL、新窗口的名字、      特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般我们只用前三个参数，因为最后一个参数只有在调用window.open()方        法却不打开新窗口时才有效。

                                                                            window对象的特性字符串

设置	值	说明
left	Number	说明新创建的窗口的左坐标。不能为负数*
top	Number	说明新创建的窗口的上坐标。不能为负数*
height	Number	设置新创建的窗口的高度。该数字不能小于100*
width	Number	设置新创建的窗口的宽度。该数字不能小于100*
resizable	yes,no	判断新窗口是否能通过拖动边线调整大小。默认值是no
scrollable	yes,no	判断新窗口的视口容不下要显示的内容时是否允许滚动。默认值是no
toolbar	yes,no	判断新窗口是否显示工具栏。默认值是no
status	yes,no	判断新窗口是否显示状态栏。默认值是no
location	yes,no	判断新窗口是否显示（Web）地址栏。默认值是no

               window.open()方法将返回 window对象作为它的函数值，该window对象就是新创建的窗口。

    3）系统对话框

        除弹出新的浏览器窗口，还可以使用其他方法向用户弹出信息，即利用window对象的alert()、confirm()和prompt()方法。

    4）时间间隔和暂停

        所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码，每次执行之间等待指定的毫秒数。

        利用window对象的setTimeout()方法设置暂停。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。第一个参数可以是代码串（与eval()     函数的参数相同），也可以是函数指针。

         要取消还未执行的暂停，可调用clearTimeout()方法，并将暂停ID传递给它。

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

     5）历史

        所谓历史，是用户访问过的站点的列表。

        我们只需要通过使用window对象的history属性及它的相关方法即可。go方法只用一个参数，即前进或后退的页面。如果为负数，就在浏览器历史中后退，如果为正数，就前     进。

        因此，后退一页，可用如下代码：

        window.history.go(-1);

        也可以不引用window对象，如下：

        history.go(-1);

        前进一页，需要使用正数，如下：

        history.go(1);

   3.document对象

       document对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。

                                                                        BOM中document对象的一些通用属性

属性	说明
lastModified	最后修改页面的日期，是字符串
referrer	浏览器历史中后退一个位置的URL
title	<title/>标签中显示的文本
URL	当前载入的页面的URL

                                                                                        document对象的集合

集合	说明
anchors	页面中所有锚点的集合（由<a name="anchorname"></a>表示）
applets	页面中所有applet的集合
embeds	页面中所有嵌入式对象的集合（由<embed/>标签表示）
forms	页面中所有表单的集合
images	页面中所有图像的集合
links	页面中所有链接的集合（由<a href="somewhere.htm"></a>表示 ）

 

   4.location对象

       BOM中最有用的对象之一是 location对象，它是window对象和document对象的属性。location对象表示载入窗口的URL，此外，它还可以解析URL：

             ①hash——如果URL包含#，该方法将返回该符号之后的内容；

             ②host——服务器的名字；

             ③hostname——通常等于host，有时会省略前面的www；

             ④href——当前载入页面的完整URL；

             ⑤pathname——URL中主机名后的部分；

             ⑥port——URL中声明的请求的端口。默认情况下，大多数URL没有端口信息，所以该属性通常是空白的；

             ⑦protocol——URL中使用的协议，即双斜杠（//）之前的部分。

             ⑧search——执行GET请求的URL中的问号（？）后的部分，又称为查询字符串。

        location.href 是最常用的属性，用于获取或设置窗口的URL（在这一点上，它类似于document.URL属性）。

        与它实现相同操作的方法是：location.assign();

        不过我们一般使用location.href属性，因为它更精确地表达了代码的意图。

         location对象还有一个reload()方法，可以重新载入当前页面。reload()方法有两种模式，即从浏览器缓存中重载（false），或从服务器端重载（true）。