Javascript的Location對象

來源:互聯網
上載者:User

一、瞭解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

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.