Window物件在前端領域的角色

特殊的window

提起window，在網頁當中很常見，例如像這樣：

window.onload=function(){
//执行函数体
}

這段程式碼的意思是當網頁內容載入完成後要做什麼。

在js的領域，window物件有著雙重角色，既是用來存取瀏覽器視窗的接口，又是Global物件。 【相關課程推薦：JavaScript影片教學】

也正因為此，所有全域作用域中宣告的變數、函數都會變成window物件的屬性與方法。

例如這樣：

var age = 29;
function sayAge(){
    alert(this.age);
}
alert(window.age); //29
sayAge();         //29
window.sayAge();  //29

但二者也不完全等同，全域變數不能透過delete刪除，而直接在window上定義的屬性可以。

歷史遺留

早期的網頁中會使用較多的視窗和框架，在同一個視窗內展示有嵌套形式的網頁，以及各種彈出窗口alert、confirm、prompt等，給用戶輸入或確認訊息，但隨著網頁開發技術和設計的發展，它們已經難尋踪跡，所以這裡不重點說。

location物件

基本屬性

location是最有用的BOM物件之一，它提供了當前視窗所載入文件的資訊和導航功能。它的主要用途都跟url有關：

　　●　hash：返回url中#符號後面的字符，如果沒有，返回空。

　　●　host/hostname：傳回伺服器名稱或連接埠號碼之類。

　　●　href：返回完整url

　　●　port：傳回指定連接埠號碼

　　●　protocol：傳回使用的協定

　　　●　protocol：傳回使用的協定

　　　　search：返回的查詢字串，即從問號開始到末尾的所有內容

location可以透過多種方式改變瀏覽器的位置，最常用的是assign ()方法，例如：

location.assign("http://www.baidu.com");

這樣就會馬上開啟新的url，並在瀏覽歷史中增加一筆記錄，下面兩行程式碼等效：

window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";

最常見的是location .href。

當然，修改其他屬性也可以改變當前加載的頁面，透過任何一種方式修改url之後，都會有一條新記錄生成，用戶可以透過點擊後退按鈕導航到前一個頁面，不過，有時候我們不希望這種操作發生，可以使用replace()方法。像下面這樣：

location.replace("http://www.baidu.com");

它只接收一個參數，即導航到的url，且不會產生記錄，使用者不能返回前一個頁面。

與位置有關的另一個方法是reload()，作用就是它的字面意思，重新加載當前頁，但這裡有一點點小講究，如果僅僅是reload，不帶參數，頁面會從瀏覽器快取中重新加載，如果強制從伺服器重新加載，則需要傳遞參數，像這樣：

location.reload(true);

history.go(-1);
history.go(1);

history.go("baidu.com");

if(history.length == 0){
    //干你想干的事
}

總結

本文來自 js教學

以上是Window物件在前端領域的角色的詳細內容。更多資訊請關注PHP中文網其他相關文章！