Window對象在前端中的作用

今天就跟大家聊聊有關Window對象在前端中的作用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

特殊的window

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

window.onload=function(){
//執行函數體
}

這段代碼的意思是當網頁內容加載完成后要做什么。

在js的領域，window對象有著雙重角色，既是用來訪問瀏覽器窗口的接口，又是Global對象。

也正因為此，所有全局作用域中聲明的變量、函數都會變成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：返回使用的協議

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

位置操作

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對象

history保留著用戶上網的記錄，每個瀏覽器窗口、標簽頁，都有自己的history對象與特定的window對象相關聯,出于安全考慮，開發人員一般無法得知用戶瀏覽過哪些網頁，但仍然有辦法實現前進后退功能，方法就是go()。例如這樣：

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

其參數不僅是數字，也可以是一個字符串，瀏覽器會跳到歷史記錄中包含該字符串的第一個位置，可以是前進，也可能是后退。比如

history.go("baidu.com");

另外，前進或者后退也有更直接一些的方法back()、forward()。

除此之外，history還有個length屬性，保存歷史記錄的數量，如果你想確定用戶是否一開始就打開了你的頁面，可以用到它。

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

history對象不是特別常用，但在某些特殊用途的設計當中，還是要請它出馬來搞定問題。

總結

window對象在移動互聯網浪潮下的地位已經不像PC端那么重，更多涉及的是功能和檢測方面，涉及交互較多，其他方面則交由功能更豐富的自定義的代碼來實現了。

看完上述內容，你們對Window對象在前端中的作用有進一步的了解嗎？如果還想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀。