JS基于Location實現訪問Url、重定向及刷新頁面的方法分析

本文實例講述了JS基于Location實現訪問Url、重定向及刷新頁面的方法。分享給大家供大家參考，具體如下：

js通過Location實現訪問Url,重定向,刷新頁

web中經常會使用到刷新頁面，訪問url、重定向請求的功能。

javascript提供了許多方法訪問，修改當前用戶在瀏覽器中訪問的url.所有的這些技術都是基于location對象的。它是作為window對象的屬性。你可以生成一個包含當前url的新location對象：

var currentURL=window.location;

在這片文章你將看到location對象的所有屬性和方法，你將學到：

• 怎么讀取url不同部分
• 怎么重定向網頁
• 怎么自動刷新或重載頁面.

1.分析url

URL有6部分組成，一些是可選的：

<協議>//<域名>:<端口>/<路徑><查詢參數><hash>
<protocol>//<hostname>:<port>/<pathname><search><hash>

協議和域名是必須項，其它是可選項。

下面是一個包含所有部分的URL例子：

http://www.example.com:80/example.cgi?x=3&y=4#results

在這個例子中, http: 是 協議, www.example.com 是 域名, 80 是端口, /example.cgi 是路徑, ?x=3&y=4是查詢字符串, #results是hash, 或頁面內部的錨點.

2.通過Location讀取當前的URL

你可以使用location對象的protocol，hostname，port，pathname，search，hash屬性訪問URL各個部分。你還可以使用下面屬性：

host
  包含域名和端口例如： www.example.com:80

href
  包含整個URL例如：http://www.example.com:80/example.cgi?x=3&y=4#results

示例：

var currentURL=window.location;
alert(currentURL.href);//Displays'http://www.example.com:80/example.cgi?x=3&y=4#results'
alert(currentURL.protocol);//Displays'http:'
alert(currentURL.host);//Displays'www.example.com:80'
alert(currentURL.hostname);//Displays'www.example.com'
alert(currentURL.port);//Displays'80'
alert(currentURL.pathname);//Displays'/example.cgi'
alert(currentURL.search);//Displays'?x=3&y=4'
alert(currentURL.hash);//Displays'#results'

3.使用Location操作URL

你可以使用location的href屬性，把頁面跳轉到不同于當前頁面的頁面。

window.location. rel="external nofollow" ;

示例：

<input type="button" onclick="window.location.
value="Visit www.google.com"/>

使用Location的href屬性跳轉頁面，前一頁的Url會保存在瀏覽器的history歷史中。當用戶點擊瀏覽器的“后退”按鈕可以返回前一頁。如果你不想讓返回前一頁可使用Location.replace()代替:

window.location.replace("http://www.example.com/anotherpage.html");

除了可以將頁面重定向不用的頁面，還可重定向當前頁面不同的錨點

window.location.hash="#moreResults";

例如：

<input type="button" onclick="window.location.hash='#top'"
value="Jump to the top of the page"/>

在頁面有個名為#top的錨點。點擊按鈕時瀏覽器會移動到頂部。注意觀察瀏覽器地址欄的變化，當你點擊瀏覽器后退按鈕可回到前一位置。

4.重載刷新頁面

可以調用Location.reload()強制瀏覽器重新刷新當前URL.就像當前用戶點擊瀏覽器的刷新按鈕或F5一樣。

window.location.reload();

如果該方法沒有規定參數，或者參數是 false，它就會用 HTTP 頭 If-Modified-Since 來檢測服務器上的文檔是否已改變。如果文檔已改變，reload() 會再次下載該文檔。如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。

如果把該方法的參數設置為 true，那么無論文檔的最后修改日期是什么，它都會繞過緩存，從服務器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣。

window.location.reload(true);

簡單示例：

<input type="button" onclick="window.location.reload()"
value="Reload the page"/>

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。