一、瞭解location對象
Location:用於擷取或設定當前的 URL 資訊
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>無標題文檔</title> 6 <script language="javascript"> 7 //Location:用於擷取或設定當前的 URL 資訊 8 //Location 對象是 window 對象的一部分,可通過 window.location 屬性對其進行訪問。 9 //------------Location對象的屬性-----------------10 //見下:11 //------------Location對象的方法-----------------12 //No1、Location.assign(URL)與location.href是一樣的,載入一個新的文檔13 14 //No2、location.reload(false|true):重新載入當前文檔(重新整理頁面)15 /*文法如下;location.reload(false|true);16 如果該方法參數為 false 或者省略參數,它就會用 HTTP 頭 If-Modified-Since 來檢測伺服器上的文檔是否已改變。17 如果文檔已改變,location.reload() 會再次下載該文檔。如果文檔未改變,則該方法將從緩衝中裝載文檔。18 如果要強制重新整理當前頁面,請將參數設定為 true。19 */20 21 //No3、location.replace(newURL):載入一個新文檔(頁面)替換當前文檔22 /*23 location.replace() 與 location.reload() 的區別:24 location.reload() 方法用於重新整理當前頁面,如果有 POST 資料提交,則會重新提交資料;25 location.replace() 則將新的頁面以替換當前頁面,它是從伺服器端重新擷取新的頁面,不會讀取用戶端緩衝且新的 URL 將覆蓋 History 26 對象中的當前紀錄(不可通過後退按鈕返回原先的頁面)。27 */28 29 //想要重新整理當前的頁面,又避免 POST 資料提交,可以使用:window.location.replace( location.href );30 </script>31 </head>32 33 <body>34 <form action="\" method="post">35 <input type="text" /><input type="submit" value="提交" />36 </form>37 <input type="button" value="點擊" onclick="window.location.assign('http://www.baidu.com')" />38 <input type="button" value="重新載入頁面" onclick="window.location.reload()" />39 <input type="button" value="載入新頁面" onclick="window.location.replace('http://www.baidu.com')" />40 41 </body>42 </html>
二、location的屬性和方法
1.location.hash設定或取得當前 URL 中的錨(包括 # 標記)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>無標題文檔</title> 6 <script language="javascript"> 7 //location.hash:設定或取得當前 URL 中的錨(包括 # 標記) 8 /*文法如下: 9 假設當前頁面的 URL 是:http://www.5idev.com/p-javascript_history.shtml#back10 document.write(window.location.hash);11 輸出:#back12 */13 //---------------------擷取URL錨點------------見上14 //---------------------設定URL錨點----------------15 function setAr(){16 location.hash="go";//設定錨點17 }18 </script>19 </head>20 21 <body>22 <button onclick="setAr()">設定錨連結</button>23 <div style="height:1200px; border:1px solid #F00"></div>24 <a name="go">已經設定的錨點</a>25 <!--26 點擊 "設定錨點連結" 按鈕,瀏覽器地址欄的 URL 將變為:http://www.5idev.com/test.shtml#go,而頁面也將跳轉到 go 這個錨連結部分。27 提示:如果原來的 URL 中有錨連結,則原來的錨連結將被替換成新設定的錨連結。28 -->29 </body>30 </html>
[最好上機操作看地址欄]
2.location.href:
1 <script language="javascript"> 2 //location.href設定或取得當前完整的 URL(頁面跳轉) 3 /* 文法如下: 4 location.href = URL 5 location.href 屬性最常用於在 JavaScript 中進行頁面的跳轉(重新導向) 6 */ 7 //----------------- 得到 URL 中的主機名稱和連接埠號碼。----------------------- 8 document.write(window.location.href);//輸出:file:///C:/Administrator/Test/Pratices/js/Location/href.html 9 10 //------------------常見寫法-------------------------------------11 /*12 實際使用中常常省略 href ,以下三種寫法效果都是一樣的:13 location.href = "http://www.baidu.com";14 location = "http://www.baidu.com";15 window.location = "http://www.baidu.com";16 */17 18 //小結:location.href 設定的參數可以是完整的 URL ,也可以是相對當前頁面的地址,也可以是相對網站根目錄的地址。19 </script>
[註:]更多請參考w3cschool | 5idev