Posted 2020-11-25Javascript6 minutes read (About 852 words)

[JS] 關於window.location類別功能：轉址、取得網址參數

關於

這篇主要會整理視窗轉址、取得網址屬性參數等等用法。

取得目前網頁資訊 location屬性

location.href 可以是用來取得目前網頁網址
以下以在MDN收尋location為例：

// location.href: 用來取得目前網頁網址
// https://developer.mozilla.org/en-US/search?q=location
console.log('location.href: '+location.href);　
// 通訊協定 location.protocol: https:
console.log('location.protocol: '+location.protocol);　
// 網域名稱 location.hostname: developer.mozilla.org
console.log('location.hostname: '+location.hostname);
// location.host: developer.mozilla.org
console.log('location.host: '+location.host);
// 可以 get 或 set port 值 location.port: 
console.log('location.port: '+location.port);　
// 網址路徑 location.pathname: /en-US/search
console.log('location.pathname: '+location.pathname);
// 網址參數 location.search: ?q=location
console.log('location.search: '+location.search);
// hash 值 如果網址中沒有 hash 則會返回空字串。注意返回的 hash 包含井字號 #。
console.log('location.hash: '+location.hash);

URL() 建構式

裡面也有上述的屬性

1	var url = new URL(location.href);

另外可以用.searchParams()來取得網址參數
用 .entries() 方法搭配 for … of 則可把key跟value取出

var url = new URL('https://github.com/search?q=javascript&type=code');
let params = url.searchParams;
console.log(params.toString()); //字串 q=javascript&type=code
url.searchParams.get('q');  // javascript
url.searchParams.get('type'); // code

for (let pair of params.entries()) {
  console.log(`key: ${pair[0]}, value: ${pair[1]}`);
}
// key: q, value: javascript
// key: type, value: code

設定網頁location

location.href

除了可以查詢現在網頁地址，也可以用來設定目前的視窗要切換去的網址

// 切到同一個網站，不同的路徑
location.href = '/search?q=javascript/';
// 切換到另一個網站
location.href = 'https://www.google.com/';

location.assign(url)

也可設定目前的視窗要切換去的網址

1	location.assign('https://www.google.com/');

location.replace(url)

也可設定目前的視窗要切換去的網址，與assign的差別是，replace會在history中被新的網頁取代，無法使用回到上一頁。

1	location.replace('https://www.google.com/');

location.reload()

可設定是否要重新整理網頁
參數為布林值：true 用來強制瀏覽器從 server 取得最新的資料；false(預設)，會優先從瀏覽器暫存檔 (cache) 中取得網頁資料。

1	location.reload(true);

function refresh(){
  window.location.reload();
}
setTimeout('refresh()',1000); //每一秒就重新整理網頁

其他重新整理頁面的用法

history.go(0)

history.go(0):重新整理本頁
history.go(-1):回到上一頁 = history.back();
history.go(-2):回到上一頁的上一頁
history.go(1):到下一頁 = history.forward();

window.location = location.href
location.assign(location.href)
location.replace(location.href)
window.navigate(location.href)
document.execCommand(‘Refresh’)
document.URL=location.href

<!-- 20秒後重新整理 -->
<meta http-equiv="refresh" content="20"> 
<!-- 20秒後跳轉到https://www.google.com/ -->
<meta http-equiv="refresh" content="20;url=https://www.google.com/">

開關視窗時刷新

<body onload="opener.location.reload()"> <!--開視窗時刷新-->
<body onUnload="opener.location.reload()"> <!--關視窗時刷新-->

<script language="javascript">
  window.opener.document.location.reload()
</script>

參考資料

[JS] 關於window.location類別功能：轉址、取得網址參數

https://kaiyuncheng.github.io/2020/11/25/windowLocation/

Author

KaiYun Cheng

Posted on

2020-11-25

Updated on

2024-04-13

Licensed under

[JS] 關於window.location類別功能：轉址、取得網址參數

關於

取得目前網頁資訊 location屬性

URL() 建構式

設定網頁location

location.href

location.assign(url)

location.replace(url)

location.reload()

其他重新整理頁面的用法

開關視窗時刷新

參考資料

Author

Posted on

Updated on

Licensed under

Comments

Catalogue

follow.it

Recents

Categories

Archives

Tags

Your browser is out-of-date!