前言:不知道你們對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>