JavaScript location Object

JavaScript 的 location 物件讓你可以存取瀏覽器頁面的網址 (URL) 相關資訊。

location 物件內建提供很多不同的屬性 (properties) 和方法 (methods)。

取得當前網頁的網址 (URL) location.href

location.href 屬性用來讓你取得當前網頁的網址:

// "http://www.fooish.com/javascript/location.html"
location.href;

取得當前網頁的網域名稱 location.hostname

location.hostname 屬性用來讓你取得當前網頁的網域名稱 (domain name; host name):

// "www.fooish.com"
location.hostname;

取得當前網頁的網址路徑 location.pathname

location.pathname 屬性用來讓你取得當前網頁的網址路徑:

// "/javascript/location.html"
location.pathname;

location.search 屬性用來讓你取得當前網頁網址上的參數 (GET parameters):

// 假設使用者所在的網頁網址為
// http://www.fooish.com/javascript/location.html?foo=hello&bar=101

// 會得到 "?foo=hello&bar=101"
location.search;

如果沒有網址參數則會返回空字串。注意返回的參數包含問號 ?

location.search 不僅可以用來讀取,還可以用來改變網址參數(會重新載入新網頁)。

取得當前網址的 hash 值 location.hash

location.hash 屬性用來讓你取得當前網頁網址上的 hash 值:

// 假設使用者所在的網頁網址為
// http://www.fooish.com/javascript/location.html#foo

// 會得到 "#foo"
location.hash;

如果網址中沒有 hash 則會返回空字串。注意返回的 hash 包含井字號 #

location.hash 不僅可以用來讀取,還可以用來改變網址 hash 值(不會重新載入網頁)。

改變當前網頁的網址;網頁轉址

location 物件還可以用來將目前網頁轉換到另一個網址,或重新整理當前的網頁。

location.href

前面提到的 location.href 除了可以用來取得當前網址,還可以用來將網頁切換到新的網址:

// 切到同一個網站,不同的路徑
location.href = '/jquery/';

// 切換到另一個網站
location.href = 'https://www.google.com/';

location.assign()

location.assign() 方法跟 location.href 用途類似,可以在當前視窗載入一個新的網頁。

語法:

location.assign(url);

用法:

location.assign('http://www.fooish.com/');

Location.reload()

Location.reload() 方法可以用來重新整理網頁。

語法:

location.reload(forcedReload);

參數 forcedReload 是一個布林值 (boolean),如果是 true 用來強制瀏覽器從 server 取得最新的資料;預設是 false,會優先從瀏覽器暫存檔 (cache) 中取得網頁資料。

用法:

location.reload(true);

location.replace()

location.replace() 方法也是用來在當前視窗載入一個新的網頁,但和 location.assign() 的差別在於,使用 location.replace() 當前網頁的瀏覽紀錄 (History) 會被新的網頁取代掉,也就是讓使用者沒辦法按「上一頁」回去。

語法:

location.replace(url);

用法:

location.replace('http://www.fooish.com/');