瀏覽器對(duì)象模型 (BOM) 使 JAVAScript 有能力與瀏覽器“對(duì)話(huà)”。
瀏覽器對(duì)象模型 (BOM)
瀏覽器對(duì)象模型（Browser Object Model）尚無(wú)正式標(biāo)準(zhǔn)。
由于現(xiàn)代瀏覽器已經(jīng)（幾乎）實(shí)現(xiàn)了 JavaScript 交互性方面的相同方法和屬性，因此常被認(rèn)為是 BOM 的方法和屬性。
Window 對(duì)象
所有瀏覽器都支持 window 對(duì)象。它表示瀏覽器窗口。
所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。
全局變量是 window 對(duì)象的屬性。
全局函數(shù)是 window 對(duì)象的方法。
甚至 html DOM 的 document 也是 window 對(duì)象的屬性之一：
window.document.getElementById("header");
與此相同：
document.getElementById("header");
Window 尺寸
有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）。
對(duì)于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 瀏覽器窗口的內(nèi)部高度
- window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
對(duì)于 Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
實(shí)用的 JavaScript 方案（涵蓋所有瀏覽器）：
實(shí)例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
該例顯示瀏覽器窗口的高度和寬度：（不包括工具欄/滾動(dòng)條）
其他 Window 方法
一些其他方法：
- window.open() - 打開(kāi)新窗口
- window.close() - 關(guān)閉當(dāng)前窗口
- window.moveTo() - 移動(dòng)當(dāng)前窗口
- window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸
window 是客戶(hù)端瀏覽器對(duì)象模型的基類(lèi)，window 對(duì)象是客戶(hù)端 JavaScript 的全局對(duì)象。一個(gè) window 對(duì)象實(shí)際上就是一個(gè)獨(dú)立的窗口，對(duì)于框架頁(yè)面來(lái)說(shuō)，瀏覽器窗口每個(gè)框架都包含一個(gè) window 對(duì)象。
全局作用域
在客戶(hù)端瀏覽器中，window 對(duì)象是訪問(wèn) BOM 的接口，如引用 document 對(duì)象的 document 屬性，引用自身的 window 和 self 屬性等。同時(shí) window 也為客戶(hù)端 JavaScript 提供全局作用域。
示例
由于 window 是全局對(duì)象，因此所有的全局變量都被解析為該對(duì)象的屬性。
var a = "window.a"; //全局變量function f () { //全局函數(shù) console.log(a);}console.log(window.a); //返回字符串“window.a”window.f(); //返回字符串“window.a”
使用 delete 運(yùn)算符可以刪除屬性，但是不能刪除變量。
訪問(wèn)客戶(hù)端對(duì)象
使用 window 對(duì)象可以訪問(wèn)客戶(hù)端其他對(duì)象，這種關(guān)系構(gòu)成瀏覽器對(duì)象模型，window 對(duì)象代表根節(jié)點(diǎn)，瀏覽器對(duì)象關(guān)系的關(guān)系如圖所示，每個(gè)對(duì)象說(shuō)明如下。
- window：客戶(hù)端 JavaScript 頂層對(duì)象。每當(dāng) <body> 或 <frameset> 標(biāo)簽出現(xiàn)時(shí)，window 對(duì)象就會(huì)被自動(dòng)創(chuàng)建。
- navigator：包含客戶(hù)端有關(guān)瀏覽器信息。
- screen：包含客戶(hù)端屏幕的信息。
- history：包含瀏覽器窗口訪問(wèn)過(guò)的 URL 信息。
- location：包含當(dāng)前網(wǎng)頁(yè)文檔的 URL 信息。
- document：包含整個(gè) HTML 文檔，可被用來(lái)訪問(wèn)文檔內(nèi)容及其所有頁(yè)面元素。
使用系統(tǒng)對(duì)話(huà)框
window 對(duì)象定義了 3 個(gè)人機(jī)交互的方法，主要方便對(duì) JavaScript 代碼進(jìn)行調(diào)試。
- alert()：確定提示框。由瀏覽器向用戶(hù)彈出提示性信息。該方法包含一個(gè)可選的提示信息參數(shù)。如果沒(méi)有指定參數(shù)，則彈出一個(gè)空的對(duì)話(huà)框。
- confirm()：選擇提示框。。由瀏覽器向用戶(hù)彈出提示性信息，彈出的對(duì)話(huà)框中包含兩個(gè)按鈕，分別表示“確定”和“取消”按鈕。如果點(diǎn)擊“確定”按鈕，則該方法將返回 true；單擊“取消”按鈕，則返回 false。confirm() 方法也包含一個(gè)可選的提示信息參數(shù)，如果沒(méi)有指定參數(shù)，則彈出一個(gè)空的對(duì)話(huà)框。
- prompt()：輸入提示框。可以接收用戶(hù)輸入的信息，并返回輸入的信息。prompt() 方法也包含一個(gè)可選的提示信息參數(shù)，如果沒(méi)有指定參數(shù)，則彈出一個(gè)沒(méi)有提示信息的輸入文本對(duì)話(huà)框。
示例1
下面示例演示了如何綜合調(diào)用這 3 個(gè)方法來(lái)設(shè)計(jì)一個(gè)人機(jī)交互的對(duì)話(huà)。
var user = prompt("請(qǐng)輸入您的用戶(hù)名");if (!! user) { //把輸入的信息轉(zhuǎn)換為布爾值 var ok = confirm ("您輸入的用戶(hù)名為：n" + user + "n 請(qǐng)確認(rèn)。"); //輸入信息確認(rèn) if (ok) { alert ("歡迎您：n" + user); } else { //重新輸入信息 user = prompt ("請(qǐng)重新輸入您的用戶(hù)名："); alert ("歡迎您：n" + user); }} else { //提示輸入信息 user = prompt ("請(qǐng)輸入您的用戶(hù)名：");}
這 3 個(gè)方法僅接收純文本信息，忽略 HTML 字符串，只能使用空格、換行符和各種符號(hào)來(lái)格式化提示對(duì)話(huà)框中的現(xiàn)實(shí)文本。提示，不同的瀏覽器對(duì)于這 3 個(gè)對(duì)話(huà)框的顯示效果略有不同。
也可以重置這些方法。設(shè)計(jì)思路：通過(guò) HTML 方式在客戶(hù)端輸出一段 HTML 片段，然后使用 css 修飾對(duì)話(huà)框的顯示樣式，借助 JavaScript 來(lái)設(shè)計(jì)對(duì)話(huà)框的行為和交互效果。
示例2
下面是一個(gè)簡(jiǎn)單的 alert() 方法，通過(guò) HTML + CSS 方式，把提示信息以 HTML 層的形式顯示在頁(yè)面中央。
window.alert = function (title, info) { var box = document.getElementById ("alert_box"); var html = '<dl><dt>' + title + '</dt><dd>' + info + '</dd></dl>'; if (box) { box.innerHTML = html; box.style.display = "block"; } else { var div = document.createElement("div"); div.id = "alert_box"; div.style.display = "block"; document.body.AppendChild (div); div.innerHTML = html; }}alert ("重寫(xiě)alert()方法"，"這僅是一個(gè)設(shè)計(jì)思路，還可以進(jìn)一步設(shè)計(jì)");
下面是 CSS樣式：
<style type="text/css">#alert_box { position: absolute; left: 50%; top: 50%; width: 400px; height: 200px; display:none;}#alert_box dl { position: absolute; left: -200px; top: -100px; width: 400px; height: 200px; border: solid 1px #999; border-radius: 8px; overflow: hidden; }#alert_box dt { background-color: #ccc; height: 30px; text-align: center; line-height: 30px; font-weight: bold; font-size: 15px; }#alert_box dd { padding: 6px; margin: 0; font-size: 12px; }</style>
顯示效果如下：
顯示系統(tǒng)對(duì)話(huà)框的時(shí)候，JavaScript 代碼會(huì)停止執(zhí)行，只有當(dāng)關(guān)閉對(duì)話(huà)框之后，JavaScript 代碼才會(huì)恢復(fù)執(zhí)行。因此，不建議在實(shí)戰(zhàn)中使用這 3 種方法，僅作為開(kāi)發(fā)人員的內(nèi)測(cè)工具即可。
打開(kāi)和關(guān)閉窗口
使用 window 對(duì)象的 open() 方法可以打開(kāi)一個(gè)新窗口。用法如下：
window.open (URL, name, features, replace)
參數(shù)列表如下：
- URL：可選字符串，聲明在新窗口中顯示網(wǎng)頁(yè)文檔的 URL。如果省略，或者為空，則新窗口就不會(huì)顯示任何文檔。
- name：可選字符串，聲明新窗口的名稱(chēng)。這個(gè)名稱(chēng)可以用作標(biāo)記 <a> 和 <form> 的 target 目標(biāo)值。如果該參數(shù)指定了一個(gè)已經(jīng)存在的窗口，那么 open() 方法就不再創(chuàng)建一個(gè)新窗口，而只是返回對(duì)指定窗口的引用，在這種情況下，features 參數(shù)將被忽略。
- features：可選字符串，聲明了新窗口要顯示的標(biāo)準(zhǔn)瀏覽器的特征，具體說(shuō)明如下表所示。如果省略該參數(shù)，新窗口將具有所有標(biāo)準(zhǔn)特征。
- replace：可選的布爾值。規(guī)定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創(chuàng)建一個(gè)新條目，還是替換瀏覽歷史中的當(dāng)前條目。
該方法返回值為新創(chuàng)建的 window 對(duì)象，使用它可以引用新創(chuàng)建的窗口。
|
新窗口顯示特征 |
|
|
特征 |
說(shuō)明 |
|
fullscreen = yes | no | 1 | 0 |
是否使用全屏模式顯示瀏覽器。默認(rèn)是 no。處于全屏模式的窗口同時(shí)處于劇院模式 |
|
height = pixels |
窗口文檔顯示區(qū)的高度。單位為像素。 |
|
left = pixels |
窗口的 x 坐標(biāo)。單位為像素。 |
|
location = yes | no | 1 | 0 |
是否顯示地址字段。默認(rèn)是 yes。 |
|
menubar = yes | no | 1 | 0 |
是否顯示菜單欄。默認(rèn)是 yes。 |
|
resizable = yes | no | 1 | 0 |
窗口是否可調(diào)節(jié)尺寸。默認(rèn)是 yes。 |
|
scrollbars = yes | no | 1 | 0 |
是否顯示滾動(dòng)條。默認(rèn)是 yes。 |
|
status = yes | no | 1 | 0 |
是否添加狀態(tài)欄。默認(rèn)是 yes。 |
|
toolbar = yes | no | 1 | 0 |
是否顯示瀏覽器的工具欄。默認(rèn)是 yes。 |
|
top = pixels |
窗口的 y 坐標(biāo) |
|
width = pixels |
窗口的文檔顯示區(qū)的寬度。單位為元素。 |
新創(chuàng)建的 window 對(duì)象擁有一個(gè) opener 屬性，引用打開(kāi)它的原始對(duì)象。opener 只在彈出窗口的最外層 window 對(duì)象（top）中定義，而且指向調(diào)用 window.open() 方法的窗口或框架。
示例1
下面示例演示了打開(kāi)的窗口與原窗口之間的關(guān)系。
win = window.open(); //打開(kāi)新的空白窗口win.document.write ("<h1>這是新打開(kāi)的窗口</h1>"); //在新窗口中輸出提示信息win.focus (); //讓原窗口獲取焦點(diǎn)win.opener.document.write ("<h1>這是原來(lái)窗口</h1>"); //在原窗口中輸出提示信息console.log(win.opener == window); //檢測(cè)window.opener屬性值
使用 window 的 close() 方法可以關(guān)閉一個(gè)窗口。例如，關(guān)閉一個(gè)新創(chuàng)建的 win 窗口可以使用下面的方法實(shí)現(xiàn)。
win.close;
如果在打開(kāi)窗口內(nèi)部關(guān)閉自身窗口，則應(yīng)該使用下面的方法。
window.close;
使用 window.closed 屬性可以檢測(cè)當(dāng)前窗口是否關(guān)閉，如果關(guān)閉則返回 true，否則返回 false。
示例2
下面示例演示如何自動(dòng)彈出一個(gè)窗口，然后設(shè)置半秒鐘之后自動(dòng)關(guān)閉該窗口，同時(shí)允許用戶(hù)單擊頁(yè)面超鏈接，更換彈出窗口內(nèi)顯示的網(wǎng)頁(yè) URL。
var url = "c.biancheng.net"; //要打開(kāi)的網(wǎng)頁(yè)地址var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no, location=no, status=no"; //設(shè)置新窗口的特性//動(dòng)態(tài)生成一個(gè)超鏈接document.write('<a href="c.biancheng.net" target="newW">切換到C語(yǔ)言中文網(wǎng)首頁(yè)</a>');var me = window.open(url, "newW", featrues); //打開(kāi)新窗口setTimeout (function () { //定時(shí)器 if (me.closed) { console.log("創(chuàng)建的窗口已經(jīng)關(guān)閉。"); } else { me.close(); }}, 5000); //半秒鐘之后關(guān)閉該窗口
使用定時(shí)器
window 對(duì)象包含 4 個(gè)定時(shí)器專(zhuān)用方法，說(shuō)明如下表所示，使用它們可以實(shí)現(xiàn)代碼定時(shí)執(zhí)行，或者延遲執(zhí)行，使用定時(shí)器可以設(shè)計(jì)演示動(dòng)畫(huà)。
|
window 對(duì)象定時(shí)器方法列表 |
|
|
方法 |
說(shuō)明 |
|
setInterval() |
按照?qǐng)?zhí)行的周期（單位為毫秒）調(diào)用函數(shù)或計(jì)算表達(dá)式 |
|
setTimeout() |
在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式 |
|
clearInterval() |
取消由 setInterval() 方法生成的定時(shí)器 |
|
clearTimeout() |
取消由 setTimeout() 方法生成的定時(shí)器 |
【setTimeout() 方法】
setTimeout() 方法能夠在指定的時(shí)間段后執(zhí)行特定代碼。用法如下：
var o = setTimeout(code, delay);
參數(shù) code 表示要延遲執(zhí)行的字符串型代碼，將在 windows 環(huán)境中執(zhí)行，如果包含多個(gè)語(yǔ)句，應(yīng)該使用分號(hào)進(jìn)行分隔。delay 表示延遲時(shí)間，以毫秒為單位。
該方法返回值是一個(gè) Timer ID，這個(gè) ID 編號(hào)指向延遲執(zhí)行的代碼控制句柄。如果把這個(gè)句柄傳遞給 clearTimeout() 方法，則會(huì)取消代碼的延遲執(zhí)行。
示例1
下面示例演示了當(dāng)鼠標(biāo)指針移過(guò)段落文本時(shí)，會(huì)延遲半秒鐘彈出一個(gè)提示對(duì)話(huà)框，顯示當(dāng)前元素的名稱(chēng)。
<p>段落文本</p><script> var p = document.getElementsByTagName("p") [0]; p.onmouseover = function (i) { setTimeout (function () { console.log(p.tagName); }, 500); }</script>
setTimeout() 方法的第一個(gè)參數(shù)雖然是字符串，但是也可以是一個(gè)函數(shù)。一般建議把函數(shù)作為參數(shù)傳遞給 setTimeout() 方法，等待延遲調(diào)用。
示例2
下面示例演示了如何為集合中每個(gè)元素都綁定一個(gè)事件延遲處理函數(shù)。
var o = document.getElementsByTagName("body") [0].childNodes; //獲取body下所有子元素for (var i = 0; i < o.length; i ++){ //遍歷元素集合 o[i].onmouseover = function (i) { //注冊(cè)鼠標(biāo)經(jīng)過(guò)事件處理函數(shù) return function () { //返回閉包函數(shù) f (o[i]); //調(diào)用函數(shù)f，并傳遞當(dāng)前對(duì)象引用 } } (i); //調(diào)用函數(shù)并傳遞循環(huán)序號(hào)，實(shí)現(xiàn)在閉包中存儲(chǔ)對(duì)象序號(hào)值}function f (o) { //延遲處理函數(shù) var out = setTimeout (function () { console.log(o.tagName); //顯示當(dāng)前元素的名稱(chēng) }, 500} //定義延遲半秒鐘后執(zhí)行代碼}
這樣當(dāng)鼠標(biāo)指針移過(guò)每個(gè)頁(yè)面元素時(shí)，都會(huì)在延遲半秒鐘后彈出一個(gè)提示對(duì)話(huà)框，提示元素名稱(chēng)。
示例3
可以利用 clearTimeout() 方法在特定條件下清除延遲處理代碼。例如，當(dāng)鼠標(biāo)指針移過(guò)某個(gè)元素，停留半秒鐘之后才會(huì)彈出提示信息，一旦鼠標(biāo)指針移出當(dāng)前元素，就立即清除前面定義的延遲處理函數(shù)，避免干擾。
var o = document.getElementsByTagName("body") [0].childNodes;for (var i = 0; i < o.length; i ++ ) { o[i].onmouseover = function (i) { //為每個(gè)元素注冊(cè)鼠標(biāo)移過(guò)時(shí)事件延遲處理函數(shù) return function () { f (o[i]); } } (i); o[i].onmouseover = function (i) { //為每個(gè)元素注冊(cè)鼠標(biāo)移出時(shí)清除延遲處理函數(shù) return function () { clearTimeout (o[i].out); //清除已注冊(cè)的延遲處理函數(shù) } } (i);}function f (o) { //把延遲處理定時(shí)器存儲(chǔ)在每個(gè)元素的 out 屬性中 o.out = setTimeout (function () { nsole.log(o.tagName); }, 500);}
如果希望反復(fù)執(zhí)行 setTimeout() 方法中包含的代碼，可以在 setTimeout() 方法中包含對(duì)自身的調(diào)用，這樣就可以把自身注冊(cè)為可以被反復(fù)執(zhí)行的方法。
示例4
下面示例會(huì)在頁(yè)面內(nèi)的文本框中按秒針?biāo)俣蕊@示遞加的數(shù)字，當(dāng)循環(huán)執(zhí)行 10 次后，會(huì)調(diào)用 clearTimeout() 方法清除對(duì)代碼的執(zhí)行，并彈出提示信息。
<input type="text" /><script> var t = document.getElementsByTagName("input") [0]; var i = 1; function f () { var out = setTimeout( //定義延遲執(zhí)行的方法 function () { //延遲執(zhí)行函數(shù) t.value = i ++; //遞加數(shù)字 f (); //調(diào)用包含setTimeout()方法的函數(shù) }, 1000); //設(shè)置每秒執(zhí)行一次調(diào)用 if (i > 10) { //如果超過(guò)10次，則清除執(zhí)行，并彈出提示信息 clearTimeout (out); console.log("10秒鐘已到"); } } f(); //調(diào)用函數(shù)</script>
【setInterval() 方法】
setInterval() 方法能夠周期性執(zhí)行指定的代碼，如果不加以處理，那么該方法將會(huì)被持續(xù)執(zhí)行，直到瀏覽器窗口關(guān)閉或者跳轉(zhuǎn)到其他頁(yè)面為止。用法如下：
var o = setInterval (code, interval)
該方法的用法與 setTimeout() 方法基本相同，其中參數(shù) code 表示要周期執(zhí)行的代碼字符串，參數(shù) interval 表示周期執(zhí)行的時(shí)間間隔，以毫秒為單位。
該方法返回值是一個(gè) Timer ID，這個(gè) ID 編號(hào)指向?qū)Ξ?dāng)前周期函數(shù)的執(zhí)行引用，利用該值對(duì)計(jì)時(shí)器進(jìn)行訪問(wèn)，如果把這個(gè)值傳遞給 clearTimeout() 方法，則會(huì)強(qiáng)制取消周期性執(zhí)行的代碼。
如果 setInterval() 方法的第 1 個(gè)參數(shù)是一個(gè)函數(shù)，則 setInterval() 方法可以接收任意多個(gè)參數(shù)，這些參數(shù)將作為該函數(shù)的參數(shù)使用。格式如下：
var o = setInterval(functioin, interval[,arg1, arg2, ... argn])
示例5
針對(duì)示例 4 可以按以下方法進(jìn)行設(shè)計(jì)。
<input type="text" /><script> var t = document.getElementByTagName("input") [0]; var i = 1; var out = setInterval (f, 1000); //定義周期性執(zhí)行的函數(shù) function f () { t.value = i ++; if (i > 10) { //如果重復(fù)執(zhí)行10次 clearTimeout (out); //則清除周期性調(diào)用函數(shù) console.log("10秒鐘已到"); } }</script>
setTimeout() 方法主要用來(lái)延遲代碼執(zhí)行，而 setInterval() 方法主要實(shí)現(xiàn)周期性執(zhí)行代碼。它們都可以設(shè)計(jì)周期性動(dòng)作，其中 setTimeout() 方法適合不定時(shí)執(zhí)行某個(gè)動(dòng)作，而 setInterval() 方法適合定時(shí)執(zhí)行某個(gè)動(dòng)作。
setTimeout() 方法不會(huì)每隔固定時(shí)間就執(zhí)行一次動(dòng)作，它受 JavaScript 任務(wù)隊(duì)列的影響，只有前面沒(méi)有任務(wù)時(shí)，才會(huì)按時(shí)延遲執(zhí)行動(dòng)作。而 setInterval() 方法不受任務(wù)隊(duì)列的限制，它只是簡(jiǎn)單的每隔一定的時(shí)間就重復(fù)執(zhí)行一次動(dòng)作，如果前面任務(wù)還沒(méi)有執(zhí)行完畢，setInterval() 可能會(huì)插隊(duì)按時(shí)執(zhí)行動(dòng)作。
使用框架集
HTML 允許使用 frameset 和 frame 標(biāo)簽創(chuàng)建框架集頁(yè)面。另外，在文檔中可以使用 iframe 標(biāo)簽創(chuàng)建浮動(dòng)框架。這兩種類(lèi)型的框架性質(zhì)是相同的。
示例1
下面是一個(gè)框架集文檔，共包含了 4 個(gè)框架，設(shè)置第 1 個(gè)框架裝載文檔名為 lef,htm，第 2 個(gè)框架裝載文檔名為 middle.htm，第 3 個(gè)框架裝載了文檔名為 right.htm，第 4 個(gè)框架裝載文檔名為 bottom.htm。
<! DOCTYPE html PUBLIC "-// W3C// DTD XHTML 1.0 Frameset // EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>框架集</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <frameset rows="50%,50%" cols="*" frameborder="yes" border="1" framespacing="0"> <frameset rows="*" cols="33%,*,33%" framespacing="0" frameborder="yes" border="1"> <frame src="left.htm" name="left" id="left" /> <frame src="middle.htm" name="middle" id="middle"> <frame src="right.htm"name="right" id="right"> </frameset> <frame src="bottom.htm" name="bottom" id="bottom"> </frameset> <noframes><body></body></noframes><html>
以上代碼創(chuàng)建了一個(gè)框架集，其中前三個(gè)框架居上，后一個(gè)框架居下。
每個(gè)框架都有一個(gè) window 對(duì)象，使用 frames 可以訪問(wèn)每個(gè) window 對(duì)象。frames 是一個(gè)數(shù)據(jù)集合，存儲(chǔ)客戶(hù)端瀏覽器中所有 window 對(duì)象，下標(biāo)值從 0 開(kāi)始，訪問(wèn)順序?yàn)閺淖蟮接摇纳系较隆＠纾瑃op.window.frames[0]、parent.frames[0] 表示第一個(gè)框架的 window 對(duì)象。
使用 frame 標(biāo)簽的 name，可以以關(guān)聯(lián)數(shù)組的形式訪問(wèn)每個(gè) window 對(duì)象。例如，top.window.frames["left"] 表示第一個(gè)框架的 window 對(duì)象。
框架之間可以通過(guò) window 相關(guān)屬性進(jìn)行引用，詳細(xì)說(shuō)明如下表所示。
|
window 對(duì)象屬性 |
|
|
屬性 |
說(shuō)明 |
|
top |
如果當(dāng)前窗口是框架，它就是對(duì)包含這個(gè)框架的頂級(jí)窗口的 window 對(duì)象的引用。注意，對(duì)于嵌套在其他框架中的框架，top 未必等于 parent |
|
parent |
如果當(dāng)前的窗口是框架，它就是對(duì)窗口中包含這個(gè)框架的父級(jí)框架引用 |
|
window |
自引用，是對(duì)當(dāng)前 window 對(duì)象的引用，與 self 屬性同義 |
|
self |
自引用，是對(duì)當(dāng)前 window 對(duì)象的引用，與 window 屬性同義 |
|
frames[] |
window 對(duì)象集合，代表窗口中的各個(gè)框架（如果存在） |
|
name |
窗口的名稱(chēng)。可被 HTML 標(biāo)簽 <a> 的 target 屬性使用 |
|
opener |
對(duì)打開(kāi)當(dāng)前窗口的 window 對(duì)象的引用 |
示例2
針對(duì)示例 1，下面代碼可以訪問(wèn)當(dāng)前窗口中的第 3 個(gè)框架。
window.onload = function () { document.body.onclick = f;}var f = function () { //改變第三個(gè)框架文檔的背景色為紅色 parent.frames[2].document.body.style.backgroundColor = "red";}
示例3
針對(duì)示例 1，在 left.htm 文檔中定義一個(gè)函數(shù)。
function left () { alert ("left.htm");}
然后，就可以在第 2 個(gè)框架的 middle.htm 文檔中調(diào)用該函數(shù)。
純文本復(fù)制
window.onload = function () { document.body.onclick = f;}var f = function () { parent.frames[0].left(); //調(diào)用第一個(gè)框架中的函數(shù)left()}
控制窗口大小和位置
window 對(duì)象定義了 3 組方法分別用來(lái)調(diào)整窗口位置、大小和滾動(dòng)條的偏移位置：moveTo() 和 moveBy()、resizeTo() 和 resizeBy()、scrollTo() 和 scrollBy()。
這些方法都包含兩個(gè)參數(shù)，分別表示 x 軸偏移值和 y 軸偏移值。包含 To 字符串的方法都是絕對(duì)的，也就是 x 和 y 是絕對(duì)位置、大小或滾動(dòng)偏移；包含 By 字符串的方法都是相對(duì)的，也就是它們?cè)诖翱诘漠?dāng)前位置、大小或滾動(dòng)偏移上增加所指定的參數(shù) x 和 y 的值。
方法 moveTo() 可以將窗口的左上角移動(dòng)到指定的坐標(biāo)，方法 moveBy() 可以將窗口上移、下移或左移、右移指定數(shù)量的像素。方法 resizeTo() 和 resizeBy() 可以按照絕對(duì)數(shù)量和相對(duì)數(shù)量調(diào)整窗口的大小。
示例
下面示例能夠?qū)?dāng)前瀏覽器窗口的大小重新設(shè)置為 200 像素寬、200 像素高，然后生成一個(gè)任意數(shù)字來(lái)隨機(jī)定位窗口在屏幕中的顯示位置。
window.onload = function () { timer = window.setInterval("jump()", 1000);}function jump () { window.resizeTo (200, 200); x = Math.ceil (Math.random() * 1024); y = Math.ceil (Math.random() * 760); window.moveTo(x, y);}
window 對(duì)象還定義了 focus() 和 blur() 方法，用來(lái)控制窗口的顯示焦點(diǎn)。調(diào)用 focus() 方法會(huì)請(qǐng)求系統(tǒng)將鍵盤(pán)焦點(diǎn)賦予窗口，調(diào)用 blur() 方法則會(huì)放棄鍵盤(pán)焦點(diǎn)。
