1. 程式人生 > >Location對象常用知識總結

Location對象常用知識總結

spa 第一個 虛擬 如果 int 開發 沒有 區分 服務器程序

產品終於上線,後期主要是優化了。在開發過程中用到了很多location對象的知識,趁現在有時間先整理一下。


Location 對象存儲在 Window 對象的 Location 屬性中,可通過window.location對其訪問,表示那個窗口中當前顯示的文檔的 Web 地址。它的 href 屬性存放的是文檔的完整 URL,其他屬性則分別描述了 URL 的各個部分。

一、Location 對象屬性

屬性 描述
href 設置或返回完整的 URL。
host 設置或返回主機名和當前 URL 的端口號。
hash 設置或返回從井號 (#) 開始的 URL(錨)。如果地址裏沒有“#”,則返回空字符串。
hostname 設置或返回當前 URL 的主機名。
pathname 設置或返回當前 URL 的路徑部分。
port 設置或返回當前 URL 的端口號。
protocol 設置或返回當前 URL 的協議。取值為 ‘http:‘,‘https:‘,‘file:‘ 等等。
search 設置或返回從問號 (?) 開始的 URL(查詢部分)。

使用實例:

(1)在利用ajax進行交互的時候,一般URL的域名部分是一樣的,所以通常會在common.js裏面定義一個常量。

如果ajax訪問的URL的域名和前端頁面訪問的域名是一樣的,這個時候就可以利用location對象來動態獲取前端頁面訪問的域名之後,再來定義這個公共常量。如下:

(網址為 :http://demo.emmaclub.com/wechat/index,那麽window.location.host 獲取的為 :demo.emmaclub.com)

技術分享

(2)在開發過程中,如果想要利用JavaScript代碼從當前頁跳轉到其他頁面,可以直接使用href屬性。

window.location.href = ‘‘;

技術分享

還有一種跳轉方法是使用location對象的replace()方法。

上述代碼相當於:

技術分享

(3)區分上述屬性:

技術分享

二、Location 對象方法

技術分享

reload()方法其實相當於刷新,而replace(URL)方法則是相當於a標簽跳轉。


這裏順便提一下URL的組成。

三、URL的組成

URL是Uniform Resource Location的縮寫,譯為“統一資源定位符”。通俗地說,URL是Internet上用來描述信息資源的字符串,主要用在各種WWW客戶程序和服務器程序上,特別是著名的Mosaic。采用URL可以用一種統一的格式來描述各種信息資源,包括文件、服務器的地址和目錄等。

URL的格式URL的格式大概由下列三部分組成:
第一部分是協議(或稱為服務方式);
第二部分是存有該資源的主機IP地址(有時也包括端口號);
第三部分是主機資源的具體地址。,如目錄和文件名等。
第一部分和第二部分之間用“://”符號隔開,第二部分和第三部分用“/”符號隔開。第一部分和第二部分是不可缺少的,第三部分有時可以省略。

就以下面這個URL為例,介紹下普通URL的各部分組成:

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

從上面的URL可以看出,一個完整的URL包括以下幾部分:
1.協議部分:該URL的協議部分為“http:”,這代表網頁使用的是HTTP協議。在Internet中可以使用多種協議,如HTTP,FTP等等本例中使用的是HTTP協議。在"HTTP"後面的“//”為分隔符

2.域名部分:該URL的域名部分為“www.aspxfans.com”。一個URL中,也可以使用IP地址作為域名使用

3.端口部分:跟在域名後面的是端口,域名和端口之間使用“:”作為分隔符。端口不是一個URL必須的部分,如果省略端口部分,將采用默認端口

4.虛擬目錄部分:從域名後的第一個“/”開始到最後一個“/”為止,是虛擬目錄部分。虛擬目錄也不是一個URL必須的部分。本例中的虛擬目錄是“/news/”

5.文件名部分:從域名後的最後一個“/”開始到“?”為止,是文件名部分,如果沒有“?”,則是從域名後的最後一個“/”開始到“#”為止,是文件部分,如果沒有“?”和“#”,那麽從域名後的最後一個“/”開始到結束,都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一個URL必須的部分,如果省略該部分,則使用默認的文件名

6.錨部分:從“#”開始到最後,都是錨部分。本例中的錨部分是“name”。錨部分也不是一個URL必須的部分

7.參數部分:從“?”開始到“#”為止之間的部分為參數部分,又稱搜索部分、查詢部分。本例中的參數部分為“boardID=5&ID=24618&page=1”。參數可以允許有多個參數,參數與參數之間用“&”作為分隔符。

Location對象常用知識總結