1. 程式人生 > >利用javascript Location訪問Url,重定向,重新整理頁面

利用javascript Location訪問Url,重定向,重新整理頁面

本文介紹怎麼使用javascript Location物件讀和修改Url.怎麼過載或重新整理頁面。
javascript提供了許多方法訪問,修改當前使用者在瀏覽器中訪問的url.所有的這些技術都是基於location物件的。它是作為window物件的屬性。你可以生成一個包含當前url的新location物件:

  1. var currentURL = window.location;  

在這片文章你將看到location物件的所有屬性和方法,你將學到:
    * 怎麼讀取url不同部分
    * 怎麼重定向網頁
    * 怎麼自動重新整理或過載頁面.

1.分析url

URL有6部分組成,一些是可選的:

  1. <協議>//<域名>:<>/<路徑><查詢引數><hash>  
  2. <protocol>//<hostname>:<port>/<pathname><search><hash>  

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

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

  1. 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

示例:

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

3使用Location操作URL

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

  1. window.location.href = "http://www.example.com/anotherpage.html";  

示例:

  1. <input type="button" onclick="window.location.href='http://www.google.com/'" 
  2. value="Visit www.google.com" />  

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

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

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

  1. window.location.hash = "#moreResults";  

例如:

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

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

4.過載重新整理頁面

可以呼叫Location.reload()強制瀏覽器重新重新整理當前URL.就像當前使用者點選瀏覽器的重新整理按鈕或F5一樣。

  1. window.location.reload ( );  

如果該方法沒有規定引數,或者引數是 false,它就會用 HTTP 頭 If-Modified-Since 來檢測伺服器上的文件是否已改變。如果文件已改變,reload() 會再次下載該文件。如果文件未改變,則該方法將從快取中裝載文件。這與使用者單擊瀏覽器的重新整理按鈕的效果是完全一樣的。

如果把該方法的引數設定為 true,那麼無論文件的最後修改日期是什麼,它都會繞過快取,從伺服器上重新下載該文件。這與使用者在單擊瀏覽器的重新整理按鈕時按住 Shift 健的效果是完全一樣。

  1. window.location.reload ( true );  

簡單示例:

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