JS Day 44: window.location

取得目前的網址與參數

語法

let locationObj = window.location;

console.log(locationObj);

屬性

範例網址：http://127.0.0.1:5506/44/index.html?q=%27username%27&status=true#title

跳頁

回到上一頁

window.history.go(-1);
history.go(-1); // 省略 window, 一樣可以動作

window.history.back(); // 另一個方法

回到下一頁

window.history.go(1);

window.history.forward();

回到第 N 頁: window.history.go(arg)

範例：

• www.google.com
• www.yahoo.com
• www.tesla.com (當前網頁)
• www.lego.com
• www.abc.com

window.history.go(-2); // 參數是正數就往上 2 頁 (forward), www.google.com
window.history.go(1);  // 參數是負數就往下 1 頁 (back), www.lego.com
window.history.go(0);  // 參數是 0 則重新載入現在頁面, refresh www.testla.com

重新整理當前頁面

除了上面提到的 window.history.go(0) 還有 reload() 方法可以用:

window.location.reload();

window.location.reload(true); 
// window.location.reload(forcedReload) 裡面的 forceReload 是 boolean

頁面跳轉

// window 皆可省略
window.location = "http://www.lego.com"; // location property
window.location.href = "http://www.lego.com"; // href property
window.location.assign('http://www.lego.com'); // assign method
window.location.replace('http://www.lego.com'); // replace method

replace 是置換掉現在的document，不會留下被置換掉的頁面紀錄，所以當你按下”上一頁”時回到的其實是你”上上個”看到的頁面 (reference-1)

Reference:
JavaScript 筆記 - window.location 類別
JavaScript 刷新頁面的幾種方法
window.location