關於 http和window.location.href的分析和 URL中“#” “？” &“”號的作用

阿新 • • 發佈：2019-01-17

window.location.replace(url) ： 通過載入 URL 指定的文件來替換當前文件，這個方法是替換當前視窗頁面，前後兩個頁面共用一個視窗，所以是沒有後退返回上一頁的

閱讀目錄

1. #

10年9月，twitter改版。一個顯著變化，就是URL加入了"#!"符號。比如，改版前的使用者主頁網址為http://twitter.com/username改版後，就變成了http://twitter.com/#!/username
　　這是主流網站第一次將"#"大規模用於重要URL中。這表明井號（Hash）的作用正在被重新認識。本文根據HttpWatch的文章，整理與井號有關的所有重要知識點。
一、#的涵義

　　#代表網頁中的一個位置。其右面的字元，就是該位置的識別符號。比如，http://www.example.com/index.html#print就代表網頁index.html的print位置。瀏覽器讀取這個URL後，會自動將print位置滾動至可視區域。
　　為網頁位置指定識別符號，有兩個方法。一是使用錨點，比如<a name="print"></a>，二是使用id屬性，比如<div id="print">。

二、HTTP請求不包括#
　　#是用來指導瀏覽器動作的，對伺服器端完全無用。所以，HTTP請求中不包括#。
比如，訪問下面的網址，http://www.example.com/index.html#print

，瀏覽器實際發出的請求是這樣的：

GET /index.html HTTP/1.1
Host: www.example.com

三、#後的字元
　　在第一個#後面出現的任何字元，都會被瀏覽器解讀為位置識別符號。這意味著，這些字元都不會被髮送到伺服器端。
比如，下面URL的原意是指定一個顏色值：http://www.example.com/?color=#fff，但是，瀏覽器實際發出的請求是：

GET /?color= HTTP/1.1
Host: www.example.com

四、改變#不觸發網頁過載
　　單單改變#後的部分，瀏覽器只會滾動到相應位置，不會重新載入網頁。
比如，從http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2，瀏覽器不會重新向伺服器請求index.html。

五、改變#會改變瀏覽器的訪問歷史
　　每一次改變#後的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用"後退"按鈕，就可以回到上一個位置。這對於ajax應用程式特別有用，可以用不同的#值，表示不同的訪問狀態，然後向用戶給出可以訪問某個狀態的連結。值得注意的是，上述規則對IE 6和IE 7不成立，它們不會因為#的改變而增加歷史記錄。
　　

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

七、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的變化。

八、Google抓取#的機制
　　預設情況下，Google的網路蜘蛛忽視URL的#部分。
　　但是，Google還規定，如果你希望Ajax生成的內容被瀏覽引擎讀取，那麼URL中可以使用"#!"，Google會自動將其後面的內容轉成查詢字串_escaped_fragment_的值。
　　比如，Google發現新版twitter的URL：http://twitter.com/#!/username
　　就會自動抓取另一個URL：http://twitter.com/?_escaped_fragment_=/username
　　通過這種機制，Google就可以索引動態的Ajax內容。

注

AJAX = 非同步 JavaScript和XML（標準通用標記語言的子集）。AJAX 是一種用於建立快速動態網頁的技術。

回到頂部

2. ？

1）連線作用：比如

http://www.xxx.com/Show.asp?id=77&nameid=2905210001&page=1

2）清除快取：比如

http://www.xxxxx.com/index.html 
http://www.xxxxx.com/index.html?test123123

兩個url開啟的頁面一樣，但是後面這個有問號，說明不呼叫快取的內容，而認為是一個新地址，重新讀取。

回到頂部

3. &

不同引數的間隔符

一、CSS和js為什麼帶引數（形如.css?t=與.js?t=）怎樣獲取程式碼

css和js帶引數（形如.css?t=與.js?t=）
使用引數有兩種可能：
第一、指令碼並不存在，而是服務端動態生成的，因此帶了個版本號，以示區別。即上面程式碼對於檔案來說等價於但瀏覽器會認為他是該檔案的某個版本！
第二、客戶端會快取這些css或js檔案，因此每次升級了js或css檔案後，改變版本號，客戶端瀏覽器就會重新下載新的js或css檔案，刷性快取的作用。
第二種情況最多，也可能兩種同時存在。
版本號，可以是一個隨機數，也可以是一個遞增的值，大版本小版本的方式，或者根據指令碼的生成時間書寫，比如就是精確到了生成指令碼的秒，而 2.3.3 就是大版本小版本的方式。

二、關於瀏覽器快取

瀏覽器快取，有時候我們需要他，因為他可以提高網站效能和瀏覽器速度，提高網站效能。但是有時候我們又不得不清除快取，因為快取可能誤事，出現一些錯誤的資料。像股票類網站實時更新等，這樣的網站是不要快取的，像有的網站很少更新，有快取還是比較好的。今天主要介紹清除快取的幾種方法。

清理網站快取的幾種方法

meta方法

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0">

清理form表單的臨時快取
方式一：用ajax請求伺服器最新檔案，並加上請求頭If-Modified-Since和Cache-Control,如下:

 $.ajax({
     url:'www.haorooms.com',
     dataType:'json',
     data:{},
     beforeSend :function(xmlHttp){ 
        xmlHttp.setRequestHeader("If-Modified-Since","0"); 
        xmlHttp.setRequestHeader("Cache-Control","no-cache");
     },
     success:function(response){
         //操作
     }
     async:false
  });

方法二，直接用cache:false,

 $.ajax({
     url:'www.haorooms.com',
     dataType:'json',
     data:{},
     cache:false, 
     ifModified :true ,

     success:function(response){
         //操作
     }
     async:false
  });

方法三：用隨機數，隨機數也是避免快取的一種很不錯的方法！

URL 引數後加上 "?ran=" + Math.random(); //當然這裡引數 ran可以任意取了
eg:
<script> 
document.write("<s"+"cript type='text/javascript' src='/js/test.js?"+Math.random()+"'></scr"+"ipt>"); 
</script>

其他的類似，只需在地址後加上+Math.random() 
注意：因為Math.random() 只能在Javascript 下起作用，故只能通過Javascript的呼叫才可以

方法四：用隨機時間，和隨機數一樣。

在 URL 引數後加上 "?timestamp=" + new Date().getTime();

用PHP後端清理

在服務端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)

方法五：

5、window.location.replace("WebForm1.aspx");   
引數就是你要覆蓋的頁面，replace的原理就是用當前頁面替換掉replace引數指定的頁面。   
這樣可以防止使用者點選back鍵。使用的是javascript指令碼，舉例如下： 
a.html 
以下是引用片段： 
<html> 
     <head> 
         <title>a</title>      
         <script language="javascript"> 
             function jump(){ 
                 window.location.replace("b.html"); 
             } 
         </script> 
     </head> 
     <body> 
        <a href="javascript:jump()">b</a> 
    </body> 
</html>  

b.html 
以下是引用片段： 
<html> 
     <head> 
         <title>b</title>      
         <script language="javascript"> 
             function jump(){ 
                 window.location.replace("a.html"); 
             } 
         </script> 
     </head> 
     <body> 
        <a href="javascript:jump()">a</a> 
    </body> 
</html>

關於 http和window.location.href的分析和 URL中“#” “？” &“”號的作用

1. #

2. ？

3. &

關於 http和window.location.href的分析和 URL中“#” “？” &“”號的作用

window.location.replace和window.location.href區別

window.location和window.location.href區別詳解

window.open和window.location.href的幾種用法

window.location.replace和window.location.href的區別

JSP中使用window.location.href()跳轉和傳遞引數。

JavaScript獲取從上個頁面傳過來的url引數:GetQueryString()方法和window.location.search方法

window. location. href和window. location. replace的區別

window.location.href和window.open的幾種用法和區別

location和location.href跳轉url的區別

中文亂碼問題--window.location.href url含中文伺服器收到亂碼問題解決

springMVC框架在js中使用window.location.href請求url時IE不相容問題解決

$(document).ready和window.onload 簡單分析區別

javascript中window.open()與window.location.href

JS中設置window.location.href跳轉無效

js如何獲取window.location.href跳轉後查詢字符串的值？

獲取window.location.href中傳的值，並且轉換成json數據使用

window.location.href 跳轉無歷史記錄

微信BUG之微信內置的瀏覽器中window.location.href 不跳轉

05 識別毒酒——幾種演算法和編碼方式的分析和比較

關於 http和window.location.href的分析 和 URL中“#” “？” &“”號的作用

1. #

2. ？

3. &

相關推薦

關於 http和window.location.href的分析和 URL中“#” “？” &“”號的作用