一篇文章帶你了解JavaScript window location
一、前言
window是DOM的核心對象，表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它是通過JS訪問瀏覽器窗口的一個接口，也是Global對象(參考百度)。
任何在全局作用域中聲明的變量和函數都會變成window對象的屬性和方法。
雖然全局變量也是window對象的屬性，但是與直接在window上定義的屬性也是有點不同。全局變量不能通過delete操作符刪除，而直接在window上定義的屬性則可以。另外，直接訪問未聲明的變量會拋出錯誤，而通過window對象訪問則不會，只是返回undefined。
window.location 對象可用于獲取當前頁地址（URL），并將瀏覽器重定向到新頁。
二、Location 屬性
對象可以不用窗口window前綴編寫。
屬性名 | 例子 | 說明 |
hash | “#contents” | URL中的hash(#號后面跟著的字符串，錨) |
host | www.badiu.com:80 | 服務器名稱和端口號 |
hostname | www.baidu.com | 服務器名稱 |
href | 完整的URL | |
pathname | “/WileyCDA” | URL中的路徑名 |
port | “80” | 端口號 |
protocol | “http” | 協議 |
window.location和document.location互相等價的，可以交換使用。
location的8個屬性都是可讀寫的，但是只有href與hash的寫才有意義。例如改變location.href會重新定位到一個URL，而修改location.hash會跳到當前頁面中的anchor(<a id="name">或者<div id="id">等)名字的標記(如果有)，而且頁面不會被重新加載。
1. Window Location Href
window.location.href 屬性返回當前頁的URL。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p>顯示當前頁的URL</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Page location is: " + window.location.href;
</script>
</body>
</html>
2. Window Location Hostname
window.location.hostname 屬性返回Internet主機（當前頁）的名稱。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p>顯示當前頁的URL的hostname.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Page hostname is: " + window.location.hostname;
</script>
</body>
</html>
3. Window Location Pathname
window.location.pathname 屬性返回當前頁面的路徑。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p>顯示當前URL的路徑名稱.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;
</script>
</body>
</html>
4. Window Location Protocol
window.location.protocol 屬性返回網頁的web協議。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua">
<p>顯示當前URL的協議部分.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Page protocol is: " + window.location.protocol;
</script>
</body>
</html>
5. Window Location Assign
window.location.assign() 方法加載新文檔。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
<script>
function newDoc() {
window.location.assign("http://www.baidu.com")
}
</script>
</head>
<body style="background-color: aqua;">
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
這里通過location.assign（）方法，點擊按鈕打開百度首頁。
三、總結
本文基于JavaScript基礎，講解了有關Window Location 的屬性，對其中一些常見的屬性 Href ,Hostname ,Protoco和web協議。對需要注意的點，難點，提供了一些方法解決這些問題。
希望大家可以根據文章的內容，積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
使用JavaScript 語言，方便大家更好理解，希望對大家的學習有幫助。
