DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Javascript如何處理地址欄信息之location對象
Javascript如何處理地址欄信息之location對象
編輯:AJAX詳解     
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頁面。

這個功能在一些需要較高安全性的網站中很有用。例如出於某種目的,不相讓用戶單擊“後退”來返回到上一頁面,就可以通過這個方法來實現。最常見的就是防止用戶重復提交同一個表單。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved