JS window對象詳解

是客戶端浏覽器對象模型的基類，對象是客戶端 的全局對象。一個 對象實際上就是一個獨立的窗口對象，對于框架頁面來說，浏覽器窗口每個框架都包含一個 對象。全局作用域在客戶端浏覽器中， 對象是訪問 BOM 的接口，如引用 對象的 屬性，引用自身的 和 self 屬性等。同時 也為客戶端 提供全局作用域。示例由于 是全局對象，因此所有的全局變量都被解析為該對象的屬性。

var a = "window.a";  //全局變量
function f () {  //全局函數
    console.log(a);
}
console.log(window.a);  //返回字符串“window.a”
window.f();  //返回字符串“window.a”

使用 運算符可以删除屬性，但是不能删除變量。訪問客戶端對象使用 對象可以訪問客戶端其他對象，這種關系構成浏覽器對象模型， 對象代表根節點，浏覽器對象關系的關系如圖所示，每個對象說明如下。

使用系統對話框 對象定義了 3 個人機交互的方法，主要方便對 代碼進行調試。示例1下面示例演示了如何綜合調用這 3 個方法來設計一個人機交互的對話。

var user = prompt("請輸入您的用戶名");
if (!! user) {  //把輸入的信息轉換為布爾值
    var ok = confirm ("您輸入的用戶名為：\n" + user + "\n 請确認。");  //輸入信息确認
    if (ok) {
        alert ("歡迎您：\n" + user);
    } else {  //重新輸入信息
        user = prompt ("請重新輸入您的用戶名：");
        alert ("歡迎您：\n" + user);
    }
} else {  //提示輸入信息
    user = prompt ("請輸入您的用戶名：");
}

這 3 個方法僅接收純文本信息，忽略 HTML 字符串，隻能使用空格、換行符和各種符号來格式化提示對話框中的現實文本。提示，不同的浏覽器對于這 3 個對話框的顯示效果略有不同。

也可以重置這些方法。設計思路：通過 HTML 方式在客戶端輸出一段 HTML 片段，然後使用 CSS 修飾對話框的顯示樣式，借助 來設計對話框的行為和交互效果。示例2下面是一個簡單的 alert() 方法，通過 HTML + CSS 方式，把提示信息以 HTML 層的形式顯示在頁面中央。

window.alert = function (title, info) {
    var box = document.getElementById ("alert_box");
    var html = '' + title + '' + info + '';
    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 ("重寫alert()方法"，"這僅是一個設計思路，還可以進一步設計");

下面是 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; }

顯示效果如下：

顯示系統對話框的時候， 代碼會停止執行，隻有當關閉對話框之後， 代碼才會恢複執行。因此，不建議在實戰中使用這 3 種方法，僅作為開發人員的内測工具即可。打開和關閉窗口使用 對象的 open() 方法可以打開一個新窗口。用法如下：

.open (URL, name, , )

參數列表如下：

該方法返回值為新創建的 對象，使用它可以引用新創建的窗口。

新窗口顯示特征特征說明

= yes | no | 1 | 0

是否使用全屏模式顯示浏覽器。默認是 no。處于全屏模式的窗口同時處于劇院模式

=

窗口文檔顯示區的高度。單位為像素。

left =

窗口的 x 坐标。單位為像素。

=yes | no | 1 | 0

是否顯示地址字段。默認是 yes。

=yes | no | 1 | 0

是否顯示菜單欄。默認是 yes。

=yes | no | 1 | 0

窗口是否可調節尺寸。默認是 yes。

=yes | no | 1 | 0

是否顯示滾動條。默認是 yes。

=yes | no | 1 | 0

是否添加狀态欄。默認是 yes。

=yes | no | 1 | 0

是否顯示浏覽器的工具欄。默認是 yes。

top =

窗口的 y 坐标

width =

窗口的文檔顯示區的寬度。單位為元素。

新創建的 對象擁有一個 屬性，引用打開它的原始對象。 隻在彈出窗口的最外層 對象（top）中定義，而且指向調用 .open() 方法的窗口或框架。示例1下面示例演示了打開的窗口與原窗口之間的關系。

win = window.open();  //打開新的空白窗口
win.document.write ("這是新打開的窗口");  //在新窗口中輸出提示信息
win.focus ();  //讓原窗口獲取焦點
win.opener.document.write ("這是原來窗口");  //在原窗口中輸出提示信息
console.log(win.opener == window);  //檢測window.opener屬性值

使用 的 close() 方法可以關閉一個窗口。例如，關閉一個新創建的 win 窗口可以使用下面的方法實現。

win.close;

如果在打開窗口内部關閉自身窗口，則應該使用下面的方法。

window.close;

使用 . 屬性可以檢測當前窗口是否關閉，如果關閉則返回 true，否則返回 false。示例2下面示例演示如何自動彈出一個窗口，然後設置半秒鐘之後自動關閉該窗口，同時允許用戶單擊頁面超鍊接，更換彈出窗口内顯示的網頁 URL。

var url = "c.biancheng.net";  //要打開的網頁地址
var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no,
    scrollbars=no,resizable=no, location=no, status=no";  //設置新窗口的特性
//動态生成一個超鍊接
document.write('切換到C語言中文網首頁');
var me = window.open(url, "newW", featrues);  //打開新窗口
setTimeout (function () {  //定時器
    if (me.closed) {
        console.log("創建的窗口已經關閉。");
    } else {
        me.close();
    }
}, 5000);  //半秒鐘之後關閉該窗口

使用定時器 對象包含 4 個定時器專用方法，說明如下表所示，使用它們可以實現代碼定時執行，或者延遲執行，使用定時器可以設計演示動畫。

對象定時器方法列表方法說明

()

按照執行的周期（單位為毫秒）調用函數或計算表達式

()

在指定的毫秒數後調用函數或計算表達式

()

取消由 () 方法生成的定時器

()

取消由 () 方法生成的定時器

【() 方法】() 方法能夠在指定的時間段後執行特定代碼。用法如下：

var o = (code, delay);

參數 code 表示要延遲執行的字符串型代碼，将在 環境中執行，如果包含多個語句，應該使用分号進行分隔。delay 表示延遲時間，以毫秒為單位。

該方法返回值是一個 Timer ID，這個 ID 編号指向延遲執行的代碼控制句柄。如果把這個句柄傳遞給 () 方法，則會取消代碼的延遲執行。示例1下面示例演示了當鼠标指針移過段落文本時，會延遲半秒鐘彈出一個提示對話框，顯示當前元素的名稱。

段落文本

    var p = document.getElementsByTagName("p") [0];
    p.onmouseover = function (i) {
        setTimeout (function () {
            console.log(p.tagName);
        }, 500);
    }

() 方法的第一個參數雖然是字符串，但是也可以是一個函數。一般建議把函數作為參數傳遞給 () 方法，等待延遲調用。示例2下面示例演示了如何為集合中每個元素都綁定一個事件延遲處理函數。

var o = document.getElementsByTagName("body") [0].childNodes;  //獲取body下所有子元素
for (var i = 0; i 
 
這樣當鼠标指針移過每個頁面元素時，都會在延遲半秒鐘後彈出一個提示對話框，提示元素名稱。示例3可以利用 () 方法在特定條件下清除延遲處理代碼。例如，當鼠标指針移過某個元素，停留半秒鐘之後才會彈出提示信息，一旦鼠标指針移出當前元素，就立即清除前面定義的延遲處理函數，避免幹擾。
 
var o = document.getElementsByTagName("body") [0].childNodes;
for (var i = 0; i 
 
如果希望反複執行 () 方法中包含的代碼，可以在 () 方法中包含對自身的調用，這樣就可以把自身注冊為可以被反複執行的方法。示例4下面示例會在頁面内的文本框中按秒針速度顯示遞加的數字，當循環執行 10 次後，會調用 () 方法清除對代碼的執行，并彈出提示信息。
 


    var t = document.getElementsByTagName("input") [0];
    var i = 1;
    function f () {
        var out = setTimeout(  //定義延遲執行的方法
        function () {  //延遲執行函數
            t.value = i ++;  //遞加數字
            f ();  //調用包含setTimeout()方法的函數
        }, 1000);  //設置每秒執行一次調用
        if (i > 10) {  //如果超過10次，則清除執行，并彈出提示信息
            clearTimeout (out);
            console.log("10秒鐘已到");
        }
    }
    f();  //調用函數
 
【() 方法】() 方法能夠周期性執行指定的代碼，如果不加以處理，那麼該方法将會被持續執行，直到浏覽器窗口關閉或者跳轉到其他頁面為止。用法如下：
 
var o =  (code, )
 
該方法的用法與 () 方法基本相同，其中參數 code 表示要周期執行的代碼字符串，參數  表示周期執行的時間間隔，以毫秒為單位。
 
該方法返回值是一個 Timer ID，這個 ID 編号指向對當前周期函數的執行引用，利用該值對計時器進行訪問，如果把這個值傳遞給 () 方法，則會強制取消周期性執行的代碼。
 
如果 () 方法的第 1 個參數是一個函數，則 () 方法可以接收任意多個參數，這些參數将作為該函數的參數使用。格式如下：
 
var o = (, [,arg1, arg2, ... argn])
 
示例5針對示例 4 可以按以下方法進行設計。
 


    var t = document.getElementByTagName("input") [0];
    var i = 1;
    var out = setInterval (f, 1000);  //定義周期性執行的函數
    function f () {
        t.value = i ++;
        if (i > 10) {  //如果重複執行10次
            clearTimeout (out);  //則清除周期性調用函數
            console.log("10秒鐘已到");
        }
    }
 
() 方法主要用來延遲代碼執行，而 () 方法主要實現周期性執行代碼。它們都可以設計周期性動作，其中 () 方法适合不定時執行某個動作，而 () 方法适合定時執行某個動作。
 
() 方法不會每隔固定時間就執行一次動作，它受  任務隊列的影響，隻有前面沒有任務時，才會按時延遲執行動作。而 () 方法不受任務隊列的限制，它隻是簡單的每隔一定的時間就重複執行一次動作，如果前面任務還沒有執行完畢，() 可能會插隊按時執行動作。使用框架集HTML 允許使用  和 frame 标簽創建框架集頁面。另外，在文檔中可以使用  标簽創建浮動框架。這兩種類型的框架性質是相同的。示例1下面是一個框架集文檔，共包含了 4 個框架，設置第 1 個框架裝載文檔名為 lef,htm，第 2 個框架裝載文檔名為 .htm，第 3 個框架裝載了文檔名為 right.htm，第 4 個框架裝載文檔名為 .htm。
 


    
        框架集
        
    
    
        
            
            
            
        
        
    
    
 
以上代碼創建了一個框架集，其中前三個框架居上，後一個框架居下。
 
每個框架都有一個  對象，使用  可以訪問每個  對象。 是一個數據集合，存儲客戶端浏覽器中所有  對象，下标值從 0 開始，訪問順序為從左到右、從上到下。例如，top..[0]、.[0] 表示第一個框架的  對象。
 
使用 frame 标簽的 name，可以以關聯數組的形式訪問每個  對象。例如，top..["left"] 表示第一個框架的  對象。
 
框架之間可以通過  相關屬性進行引用對象，詳細說明如下表所示。
 
 對象屬性屬性說明
 
top
 
如果當前窗口是框架，它就是對包含這個框架的頂級窗口的  對象的引用。注意，對于嵌套在其他框架中的框架，top 未必等于 
 
 
如果當前的窗口是框架，它就是對窗口中包含這個框架的父級框架引用
 
 
自引用，是對當前  對象的引用，與 self 屬性同義
 
self
 
自引用，是對當前  對象的引用，與  屬性同義
 
[]
 
 對象集合，代表窗口中的各個框架（如果存在）
 
name
 
窗口的名稱。可被 HTML 标簽  的  屬性使用
 
 
對打開當前窗口的  對象的引用
 
示例2針對示例 1，下面代碼可以訪問當前窗口中的第 3 個框架。
 
window.onload = function () {
    document.body.onclick = f;
}
var f = function () {  //改變第三個框架文檔的背景色為紅色
    parent.frames[2].document.body.style.backgroundColor = "red";
}
 
示例3針對示例 1，在 left.htm 文檔中定義一個函數。
 
function left () {
    alert ("left.htm");
}
 
然後，就可以在第 2 個框架的 .htm 文檔中調用該函數。
 
window.onload = function () {
    document.body.onclick = f;
}
var f = function () {
    parent.frames[0].left();  //調用第一個框架中的函數left()
}
 
控制窗口大小和位置 對象定義了 3 組方法分别用來調整窗口位置、大小和滾動條的偏移位置：() 和 ()、() 和 ()、() 和 ()。
 
這些方法都包含兩個參數，分别表示 x 軸偏移值和 y 軸偏移值。包含 To 字符串的方法都是絕對的，也就是 x 和 y 是絕對位置、大小或滾動偏移；包含 By 字符串的方法都是相對的，也就是它們在窗口的當前位置、大小或滾動偏移上增加所指定的參數 x 和 y 的值。
 
方法 () 可以将窗口的左上角移動到指定的坐标，方法 () 可以将窗口上移、下移或左移、右移指定數量的像素。方法 () 和 () 可以按照絕對數量和相對數量調整窗口的大小。示例下面示例能夠将當前浏覽器窗口的大小重新設置為 200 像素寬、200 像素高，然後生成一個任意數字來随機定位窗口在屏幕中的顯示位置。
 
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);
}
 
 對象還定義了 focus() 和 blur() 方法，用來控制窗口的顯示焦點。調用 focus() 方法會請求系統将鍵盤焦點賦予窗口，調用 blur() 方法則會放棄鍵盤焦點。