一篇文章帶你了解JavaScript window location
回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習(xí)資料
一、前言
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 | http://www.baidu.com | 完整的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。
例：
<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)前頁）的名稱。
例：
<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)前頁面的路徑。
例：
<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é)議。
例：
<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() 方法加載新文檔。
例：
<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í)有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請?jiān)诤笈_回復(fù)【入群】
萬水千山總是情，點(diǎn)個【在看】行不行