location 對象是window對象的一個子對象,通過它可以獲取或設置浏覽器的當前地址。
location 對象最常見的功能就是改變浏覽器當前浏覽的頁面,例如:
window.location=">http://www.google.com";
僅僅通過一個屬性賦值,卻產生了如同方法調用的效果(浏覽器跳轉),這個令人覺得不可思議。事實上在內部流程的實現上,它采用了一個方法調用,等價於:
window.location.href=">http://www.google.com";
介紹利用location 對象實現的兩個主要功能。
1.處理URL
在internet 上,URL用於確定一個網頁的地址,它通常包括主機名(如:>www.hostname.cn),路徑信息(如/blog/),頁面名稱(如showTopic.ASPx),查詢字符串(如?sort=book&id=8215),書簽信息(如#chapter3)等。在Javascript 中有時需要對這些信息進行處理,盡管可以自己分析window.location的完整返回值,但location對象提供了一些屬性可以更方便地處理這些信息。
location 對象的屬性
屬性 示例 描述
protocol http: 表示浏覽器和服務器間通信所使用的協議
hostname >www.x2blog.cn 表示服務器的主機地址,通常是一個域名或IP地址
port 80 表示浏覽器和服務器間通信所使用的服務器端口(默認
80,也是WEB服務器常用的端口)
host www.x2blog.cn:80 表示主機名加端口號,等價於:hostname+port
pathname /AJax/3.2Html 文檔的路徑信息
hash #chapter1 表示書簽名,即從#開始到書簽結束的部分
search ?sort=book&id=8215 表示查詢字符串,即從問號(?)開始到查詢參數結束部分
href >http://www.x2blog.cn:80/AJax/3.3.Html?sort=book&id=23#chapter1 表示整個URL地址
2 .控制浏覽器
location 對象提供了兩個方法用來對頁面載入進行控制,分別是reload 方法和replace方法。
(1)reload(source)方法顧名思義,reload方法就是重新載入頁面,它接受一個布爾類型的參數source,表示頁面載入的來源。當source為默認值false時,表示從緩存中載入頁面;當source為true 時表示強制從服務器重新載入頁面。通過這個方法,可以很容易實現頁面刷新功能。
(2)replace(URL)方法
使用浏覽器訪問網站時,浏覽器能夠將訪問過的頁面記錄下來,稱訪問歷史。單擊“後退”或“前進”按鈕時,能夠將用戶導航到上一頁面或下一頁面。replace方法用來控制新記錄插入浏覽器訪問歷史列表中的方式。
語法:location.replace(URL);
這個調用實際上和改變location屬性的效果相同,表示將用戶導航至URL所指向的頁面。然而,當前頁面卻不會被記錄到浏覽器歷史列表中,而是由新頁面代替。
例如:3個頁面都具有3個鏈接,分別指向http://www.ajaxsamples.cn/html/page1.html,http://www.AJaxsamples.cn/html/page2.html,page3.Html. 前面兩個鏈接是普通的文本鏈接。如:
page1
page2
page3
//Javascript:void(0)表示空函數調用,在這裡只是起到完善鏈接標記(a)的功能,因為每個鏈接標記(a)都必須有一個href屬性。
當用戶依次單擊這三個鏈接時,浏覽器的歷史記錄將僅會保留http://www.ajaxsamples.cn/html/page1.html 和 page3.html 兩個記錄。在到達第三個頁面時單擊“後退”按鈕,浏覽器將會導航至http://www.ajaxsamples.cn/html/page1.html頁面而不是http://www.AJaxsamples.cn/html/page2.Html頁面。
這個功能在一些需要較高安全性的網站中很有用。例如出於某種目的,不相讓用戶單擊“後退”來返回到上一頁面,就可以通過這個方法來實現。最常見的就是防止用戶重復提交同一個表單。