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