瀏覽器對象模型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）。