關於url中的#-----hash


前言:不知道你們對url地址中的#一開始是怎么理解的,反正我以前一直都是默認那就是本頁面中該id的位置。今天看了篇文章,才把這個真正透徹理解。

1,#涵義

#代表網頁中的一個位置。其右面的字符,就是該位置的標識符。

http://example.com/index.html#user;

就代表網頁index.html的print位置。瀏覽器讀取這個URL后,會自動將print位置滾動至可視區域。

為網頁位置指定標識符,有兩個方法。一是使用錨點,比如<a name="user"></a>,二是使用id屬性,比如<div id="user" ></div>。

2,http請求中不含#

以我們平時的經驗來看,的確http請求中是從來沒有#出現的

#是用來指導瀏覽器動作的,對服務器端完全無用。所以,HTTP請求中不包括#。

Get /index.html  HTTP/1.1

http://example.com

這意味着#后面的部分是不會發送到服務器端的。所以如果我們想要發送#,就必須進行轉碼,將#轉碼為%23

3,改變#不觸發網頁重載

單單改變#后的部分,瀏覽器只會滾動到相應位置,不會重新加載網頁。

每一次改變#后的部分,都會在瀏覽器的訪問歷史中增加一個記錄,使用"后退"按鈕,就可以回到上一個位置。

window.location.hash這個屬性可讀可寫。讀取時,可以用來判斷網頁狀態是否改變;寫入時,則會在不重載網頁的前提下,創造一條訪問歷史記錄。

4,onhashchange事件

這是一個HTML 5新增的事件,當#值發生變化時,就會觸發這個事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持該事件。

使用方法有三種:

  window.onhashchange = func;

  <body onhashchange="func();">

  window.addEventListener("hashchange", func, false);

對於不支持onhashchange的瀏覽器,可以用setInterval監控location.hash的變化。

解析一個完整的url,返回Object包含域與window.location相同

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9         function parseUrl(url){
10             var result = {};
11             var keys = ['href','origin','protocol','host','hostname','port','pathname','search','hash'];
12             var regexp = /(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))(\/[^?#]*)?(\?[^#]*)?(#.*)?/;
13             var match = regexp.exec(url);
14             if(match){
15                 for(var i=keys.length-1;i>=0;i--){
16                     result[keys[i]] = match[i]?match[i]:' ';
17                 }
18             }
19             return result;
20         }
21         var res = parseUrl('http://baidu.com:80/abd#521');
22         console.log(res);
23     </script>
24 </body>
25 </html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM