利用javascript Location訪問Url,重定向,重新整理頁面
本文介紹怎麼使用javascript Location物件讀和修改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.href = "http://www.example.com/anotherpage.html";
示例:
- <input type="button" onclick="window.location.href='http://www.google.com/'"
- 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" />