瀏覽器中內建物件Location詳解

• 引言
• 正文
• • 一、Location物件的作用
  • 二、Location物件的引用
  • 三、Location物件的屬性
  • 四、Location物件的方法
• 結束語

 

引言

在學過JavaScript之後，我們都知道物件分為內建物件 、宿主物件 、自定義物件，我們經常用到的瀏覽器中的內建物件就是宿主物件的一種，瀏覽器的內建物件有很多，本文就來詳細講解一下Location物件的屬性與方法吧。

• 公眾號：前端印象
• 不定時有送書活動，記得關注~
• 關注後回覆對應文字領取：【面試題】、【前端必看電子書】、【資料結構與演算法完整程式碼】、【前端技術交流群】

正文

因為把瀏覽器的所有內建物件逐個詳細講解，文章篇幅會很長，所以我把每個物件的講解都放在不同的文章中，大家如果還想了解其他的瀏覽器內建物件，可以劃到文章最後一部分，那裡有跳轉連結。

一、Location物件的作用

Location物件包含著關於當前網頁的URL資訊，並且可以對URL進行拆分 、讀寫等各種操作。

二、Location物件的引用

我們可以通過瀏覽器的全域性物件window來引用Location，像這樣window.location ，也可以直接通過 location 來引用Locagtion物件。

window.location === location      //返回 true

我們在瀏覽器的控制檯中引用一下Location物件，看看會返回什麼

可以看到，返回的Location物件中有許多的屬性和方法，接下來我們就對這些屬性和方法進行講解。

三、Location物件的屬性

我們來看一下Location物件的屬性，下面用一張表格來呈現：

屬性	描述
href	設定或返回完整的URL
protocol	設定或返回URL的協議部分
host	設定或返回主機名和URL的埠號
hostname	設定或返回URL的主機名
pathname	設定或返回URL的路徑
port	設定或返回URL的埠號
search	設定或返回URL的引數部分，即?後面的引數部分
hash	設定或返回URL的錨點部分，即#後面的錨點部分

接下來，看一下URL的格式是什麼樣的：協議://主機名:埠/路徑?查詢引數#錨

再來看看一個真實的URL
https://www.baidu.com/index.html?query=java&i=0#_1

我們在該URL頁面呼叫Location物件的各個屬性的返回值如下：

location.href   //返回https://www.baidu.com:5000/index.html?query=java&i=0#_1

location.protocol  //返回  https:

location.host      //返回  www.baidu.com:5000    

location.hostname  //返回  www.baidu.com

location.pathname  //返回  /index.html

location.port      //返回   5000

location.search    //返回  ?query=java&i=0

location.hash      //返回  #_1

這些屬性是可讀/寫的，所以我們還可以通過給這些屬性賦值，來改變當前頁面的URL值，完成一些頁面的跳轉等操作，例如

//給當前頁面的location物件的href屬性賦值一個新的URL地址
location.href = "https://blog.csdn.net/L_PPP"

我們來看一下給href屬性賦值後，會發生什麼

可以看到，給href屬性賦值後，當前頁面的URL發生了改變，併發生了相應的頁面跳轉。同樣的其他的屬性也是可以進行賦值的，大家可以自行測試一下。

四、Location物件的方法

Location物件一共有3種方法，他們分別是：

方法	描述
assign()	載入一個新的頁面
replace()	用新的頁面替換當前頁面
reload()	重新載入當前頁面

我們來逐個講解這三種看似作用相同，卻有很大區別的方法吧。

• assign()

該方法需要傳入一個URL作為引數，呼叫該方法後，頁面會跳轉到該URL所在的頁面，並且我們可以通過瀏覽器的回退功能返回上一個頁面。

//呼叫Location物件的assign()方法
location.assign("https://blog.csdn.net/L_PPP")

我們來看一下動圖展示

• replace()

該方法同assign()方法一樣，也需要傳入一個URL作為引數，呼叫該方法後，頁面會跳轉到該URL所在的頁面，但是不同的是，該方法呼叫進行跳轉後無法通過瀏覽器的回退功能返回上一個頁面了。

//呼叫Location物件的replace()方法
location.replace("https://blog.csdn.net/L_PPP")

我們來看一下動圖展示

• reload()

該方法不需要傳入任何的引數，可直接呼叫。呼叫該方法，會將當前頁面重新載入，就相當於我們按了F5重新整理頁面。

//呼叫了location物件的reload()方法
location.reload()

我們來看一下動圖展示

結束語

好了，Location物件的講解就到這裡了，如果各位對瀏覽器的其他內建物件感興趣的話，可以去看我這篇文章——http://urstoron.com/1bkv     瀏覽器中的JavaScript核心講解之BOM（瀏覽器物件模型），翻到最底部，可以看到各種其它瀏覽器內建物件的詳解。