BOM對象

BOM(Browser Object Model) 是指浏覽器對象模型，是用于描述這種對象與對象之間層次關系的模型，浏覽器對象模型提供了獨立于内容的、可以與浏覽器視窗進行互動的對象結構。

BOM由多個對象組成，其中代表浏覽器視窗的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。[1]

ｂｏｍ．浏覽器對象

window對象，所有對象的頂層對象。操作該對象是對視窗進行設定

    window對象表示整個浏覽器視窗,但不必表示其中包含的内容.此外,window還可用于移動或調整它表示的浏覽器的大小,或者對它産生其他影響.

注:如果頁面使用架構集合,每個架構都由它自己的window對象表示,存放在frames集合中.在frames集合中,可用數字(由0開始,從上到下,從左到右,逐行的)或名字對架構進行索引.

如：

<frameset rows = “100,*”>

           <frame src=“frame.htm” name = “topFrame” />

           <frameset cols = “40%,60%”>

               <frame src=“anotherframe.htm” name = “leftFrame”/>

               <frame src=“yetanotherframe.htm” name = “rightFrame” />

           </frameset>

    </frameset>

                               [frameset1.htm]

擷取架構對象

parent.frames[0].name 所屬架構上級的第一個

如 <frameset rows="100,*"> <frame src="frame.html" name="topFrame"> 

在frame.html網頁中，"alert(parent.frames[0].name)，就是彈出topFrame

在frame.html網頁中，"alert(parent.frames[1].name)，就是彈出leftFrame

        <frameset cols="50%,50%">

             <frame src="anotherframe.html" name="leftFrame"/>

               <frame src="yetanotherframe.html" name = "rightFrame"/>

        </frameset>

 </frameset>

=========================================================

   <frameset cols="100,*">

         <frame src="red.html" name="redFrame"/>

在red.html裡面點選alert(parent.frames[0].name)，彈出redFrame

         <frame src="blue.html" nam="blueFrame"/>

   </frameset>

視窗操作

p      moveBy(dx,dy) –把浏覽器視窗水準移動dx個像素,豎直移動dy個像素.

p      moveTo(x,y) –移動浏覽器視窗,使它的左上角位于使用者螢幕的(x,y)處.

p      resizeBy(dw,dh) –相對于浏覽器視窗的目前大小,把視窗的寬度調整dw個像素,把視窗的高度調整為dy個像素.

p      resizeTo(w,h) –把視窗的寬度調整為w,高度調整為h,不能使用負數

p      screenLeft、screenTop: IE中用于得到視窗的位置。

注：指的是内容區域相對于桌面螢幕最右上角（0,0）點的坐标

     IE未提供任何判斷視窗大小的方法。用document.body.offsetWidth和document.body.offsetHeight屬性可以擷取視口（dom區域）的大小(顯示html頁的區域),但它們不是标準屬性.

}         Mozilla提供window.screenX,window.screenY屬性判斷視窗的位置，它還提供了window.innerWidth和window.innerHeight屬性來判斷視口的大小，window.outerWidth和window.outerHeight屬性判斷浏覽器視窗自身的大小.

}         導航和打開新視窗

    oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace bReplace])

window.open方法打開新視窗

sURL—要載入的頁面的URL

sName—新視窗的名字 (也可是架構頁的名字如：topFrame)如果名字是架構名，那麼這個網頁會在這個架構裡面打開

bReplace—是否用新載入的頁面替換目前載入的頁面的Boolean值.

sFeatures—特性字元串

}         sFeatures

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 判斷新視窗是否顯示位址欄.預設為no

fullscreen=yes   全屏

window.open()方法将傳回window對象作為它的函數值，該window對象就是新建立的視窗(如果給定的名字是已有的架構名，則為架構).用這個對象，可以操作新建立的視窗.

}         var oNewWin = window.open(“Noname2.html”,“null”,“height=200,width=200,top=0,left=0,toolbar=no,status=no,resizable=no,scrollable=no");

}         oNewWin.moveTo(0,0);

}         oNewWIn.resizeTo(400,400);

狀态欄

一般說來,狀态欄告訴了使用者何時在載入頁,何時完成載入頁面.可以用window的兩個屬性設定它的值.

即status和defaultStatus屬性

status:可以使狀态欄的文本暫時改變,面defaultStatus則可在使用者離開目前頁面前一直改變該文本.

eg:window.defaultStatus=“歡迎光臨本網站”;

<a href=“book.htm” onmousemove=“window.status=‘歡迎訂覽’”>Books</a>

}         時間間隔與暫停

可以用window對象的setTimeout()方法設定暫停.

該方法兩個參數,第一個參數可以是代碼串或函數名,

第二個參數是在執行它之前要等待的毫秒數.

eg:

1、setTimeout(“alert(‘ok’)”,1000);

2、setTimeout(function(){alert(“ok”);},1000);

3、function test()

{

    alert(“ok”);

}

setTimeout(test,1000); 隻執行一次

setInterval無限次地每隔指定的時間段就重複一次指定的代碼.

時間間 隔與暫停（setTimeout）的方式類似,隻是它無限次地每隔指定的時間段就重複一次指定的代碼.也可利用clearInterval(ID)來清除時間間隔

====================

調用setTimeout()時，它建立一個數字暫停ID，與作業系統中的程序ID相似,暫停ID本質上是要延遲的程序的ID。在調用setTimeout()後，就不應該再執行它的代碼.要取消還未執行的暫停，可調用clearTimeout()方法,并将暫停的ID傳遞給它

var iTimeoutID = setTimeout(“alert(‘OK’)”,1000);

clearTimeout(iTimeoutID);

}         曆史(history)

    可以通路浏覽器視窗的曆史.所謂曆史，是使用者通路過的站點的清單.

1、go() 方法隻有一個參數，即前進或後退的頁面數.(如為負數，就為後退)

eg: window.history.go(1); window.history.go(-1);曆史界面的前進和後退

2、back()和forward()一樣可以實作上述的功能 相當于go（-1）和go（1）

3、length可以用于檢視曆史中的頁面數 判斷有沒有曆史界面

}         document對象

    document對象實際上是window對象的屬性

    這個對象的獨特之處是它是唯一一個即屬于BOM又屬于DOM的對象.

    從BOM的角度看,document對象是由一系列集合構成。這些集合可以通路文檔的各個部分,并提供頁面自身的資訊。每個浏覽器實作的document對象都稍有不同.

    下面列出一些常用的屬性.

}         document對象包含的集合

1、anchors : 頁面中所有錨的集合<a name=“anchorsname”></a>

2、applets: 頁面中所有applet的集合

3、embeds: 頁面中所有嵌入式對象的集合(由<embed/>标簽表示)

4、forms： 頁面中所有表單的集合

5、images：頁面中所有圖像的集合

6、links: 頁面中所有鍊結的集合(由<a href=“xxx.htm”>xxx</a>表示)

7、alinkColor: 激活連結的顔色.eg:<body alink=“red”>

8、bgColor: 頁面的背景顔色.eg:<body bgcolor=“blue”>

9、lastModified:最後修改頁面的日期，是字元串

10、linkColor: 鍊結的顔色. eg:<body link=‘blue’>

11、referrer: 浏覽器曆史中後退一個位置的URL

12、title: <title/>标簽中顯示的文本

13、URL：目前載入頁面的URL

14、vlinkColor:通路過的鍊結的顔色.eg:<body vlink=“blue”>

注意：通路文檔的各個部分的方法可如下：

1、用document.links[0]通路連結

2、用document.images[0]或document.images[“imgname”]通路圖像

3、用document.forms[0]或document.forms[“frmname”]來通路表單

}         document.write()和document.writeln();

寫入文檔内容

eg:通過以下方式動态引入外部的JS

}         <SCRIPT LANGUAGE="JavaScript">

}         <!--

}             var str="<script type=\"text/javascript\" src=\"my.js\"></scr"+"ipt>";

}         最後的script需要分開寫

}          document.write(str);

}         //-->

}         </SCRIPT>

注意：要插入内容屬性，必須在完全載入頁面前調用write()和writeln()方法，如果任何一個方法是在頁面載入後調用的，它将抹去頁面的内容，顯示指定的内容.

open()與close()方法

與write和writeln方法緊密相關的是open()和close()方法.

open()方法用于打開已經載入的文檔以便進行編寫.

close()方法用于關閉open()方法打開的文檔,本質是告訴它顯示寫入其中的所有内容.

eg：

var　oNewWin=window.open("about:blank","newwindow","height=150,width=400,top=10,left=20,resiable=yes");

oNewWin.document.open();

oNewWin.document.write("<html><head><title>new Window</title></head>");

oNewWin.document.write("<body>This is a new Window!</body></html>");

oNewWin.document.close();

}         location對象，對位址進行解析

Location對象表示載入視窗的URL,此外,它還可以解析URL:

       hash—如果URL包含#,該方法将傳回該符号之後的内容(eg:http://www.somewhere.com/index#selection1的hash等于”#selection1”)

       host – 伺服器的名字(eg:www.yahoo.com.cn)

       hostname – 通常等于host,有時會省略前面的www

       href – 目前載入的頁面的完整的URL

       pathname –URL中主機名後的部分.eg:http://www.yahoo.com.cn/pictures/index.htm的pathname是”/pictures/index.htm”

       port – URL中聲明的請求的端口,預設情況下,大多數URL沒有端口資訊,是以該屬性通常是空白的.如:http://www.somewhere:8081/index.htm的port傳回的是8081

       protocol –URL中使用的協定 eg:http://www.google.cn

   傳回的是http:,ftp://www.wrox.com傳回的是ftp:

       search – 執行GET請求的URL中的問号(?)後的部分.

    中的search屬性是?term=javascript;

}         location.href

}         location.assign

eg: 向另外頁面導航

location.assign(“http://www.wrox.com”);

要從伺服器重載目前頁面 :location.reload(true)／／重新整理，從伺服器加載頁面

要從緩存中重載目前頁面: location.reload(false)（從緩存加載頁面） 或location.reload()

navigator對象，用于提供ｗｅｂ伺服器的資訊

navigator對象用于提供Web浏覽器資訊

1、appName: 官方浏覽器的字元串表示

2、appVersion: 浏覽器版本資訊的字元串表示

3、language:浏覽器語言的字元串表示

4、platform:運作浏覽器的計算機平台的字元串表示

5、systemLanguage:作業系統語言的字元中表示

6、userLanguage:作業系統語言的字元串表示

7、vendor:品牌浏覽器名的字元串表示

說明：在判斷浏覽器頁面采用的是哪種浏覽器方面時，navigator非常有用

screen對象可以用screen對象擷取某些關于使用者螢幕

screen對象通常包含下列屬性.

       availHeight : 視窗可以使用的螢幕的高度(以像素計),其中包括作業系統元素（如windows工具欄）需要的空間

       availWidth: 視窗可以使用的螢幕的寬度(以像素計)

       colorDepth: 使用者表示顔色的位數,大多數采取32位計.

       height : 螢幕的高度

       width : 螢幕的寬度

eg:可用以下代碼填充使用者的螢幕

window.moveTo(0,0);

window.resizeTo(screen.availWidth,screen.availHeight);