javascript操作referer詳細解析_javascript技巧-js教程-PHP中文網

Referrer的重要性
HTTP請求中有一個referer的封包頭，用來指明目前流量的來源參考頁。例如在www.sina.com.cn/sports/上點選一個連結到達cctv.com首頁，那麼就referrer就是www.sina.com.cn/sports/了。在Javascript中，我們可以透過document.referrer來取得相同的資訊。透過這個訊息，我們就可以知道訪客是從什麼管道來到目前的頁面。這對於Web Analytics來說，是非常重要的，這可以告訴我們不同管道帶來的流量的分佈情況，還有用戶搜尋的關鍵字等，都是透過分析這個referrer資訊來獲得的。

但是，出於各種各樣的原因，有時候Javascript中讀到的referrer卻是空字串。下面總結一下哪些情況下會遺失referrer。

修改Location物件進行頁面導覽
Location物件是一個用於頁面導航的非常實用的物件。因為他允許你只變更Url的其中一部分。例如從cn域名切換到com域名，其他部分不變：

複製代碼代碼如下:

window.location.hostname = "example.com";

但是，透過修改Location進行頁面導航的方法，會導致在IE下丟失Referrer。

IE5.5 下回傳空字串

Chrome3.0 ，Firefox3.5，Opera9.6，Safari3.2.2皆正常回傳來源網頁

window.open方式開啟新視窗
範例：

複製程式碼

複製程式碼複製程式碼

複製程式碼

程式碼如下:

訪問Google

點擊此連結會在新視窗開啟Google網站，我們在網址列中輸入以下js程式碼就可以看到發送的referrer了。

複製程式碼

 程式碼如下:

javascript:alert().ref 🎜>
測試結果：

IE5.5 下回傳空字串

Chrome3.0 ，Firefox3.5，Opera9.6，Safari3.2.2皆正常回傳來源網頁

如果是同個網域下透過此方式跳轉的，那麼我們可以透過存取windoww.opener物件去取得遺失的referrer資訊。程式碼如下：

複製程式碼程式碼如下:
跨域的話則沒轍了~

滑鼠拖曳開啟新視窗
滑鼠拖曳是現在非常流行的使用者習慣，許多瀏覽器都內建或可以透過外掛程式的方式來支援滑鼠拖曳式瀏覽。但是透過這種方式開啟的頁面，基本全都遺失referrer。而且，在這種情況下，也無法使用window.opener的方式去取得遺失的referrer了。

已測：

Maxthon2.5.2，Firefox的FireGesture插件，Chrome3.0 ，Opera9.6，Safari3.2。

點選Flash內部連結
點選Flash上到達另外一個網站的時候，Referrer的情況就比較雜亂了。

IE下，透過客戶端Javascript的document.referrer讀取到的值是空的，但是如果你使用流量監控軟體看一下的話，你會發現，實際上HTTP請求中的Referer報文頭卻是有值的，這可能是IE實現的Bug。同時，這個值指向的是Flash檔案的位址，而不是來源網頁的位址。

Chrome4.0下點擊Flash到達新視窗之後，Referrer也是指向的Flash檔案的位址，而不是來源網頁的位址。

Chrome3.0和Safari3.2是一樣的，都是會遺失Referrer訊息。

Opera則和Firefox一樣，Referrer的值都是來源網頁的位址。

HTTPS跳到HTTP
從HTTPS的網站跳到HTTP的網站時，瀏覽器是不會發送referrer的。這個各大瀏覽器的行為是一樣的。

例如，我們在HTTPS下使用Google Reader或是Gmail的時候，點擊某個連結到另一個網站，那麼從技術上來說，這樣的存取和使用者直接鍵入網址存取是沒有什麼分別的。

Referrer遺失對於廣告流量監控的影響
Referrer如果遺失，Web Analytics就會丟掉很重要的部分資訊了，特別對於廣告流量來說，就無法知道實際來源了。目前國內好多用了Google Adsense廣告的網站，都使用了window.open的方式來打開廣告鏈接，因此IE下會丟失Referrer，而我們知道，IE是目前市場份額最大的瀏覽器，因此其影響是很大的。許多流量統計工具會因此將這部分流量歸入“直接流量”，和使用者直接鍵入網址等價了。

對於這樣的情況，需要讓廣告投放者在投放廣告的時候，給著陸頁面的Url加上特定的追蹤參數。

例如，某個Flash廣告，點擊之後到達的網址是http://www.example.com/，為了監控此流量是從哪個渠道過來的，我們可以修改此投放的著陸Url，改成http ://www.example.com/?src=sina，類似這種方式，然後在著陸頁面中使用Javascript程式碼提取此src參數，這樣就可以得到廣告來源資訊。

在投放Google Adwords的時候，後台系統有一個「自動標記」的選項，當啟用此選項的時候，Google在產生所有廣告的登陸頁面Url的時候，就會自動加上一個gclid的參數，這個參數能夠將Google Analytics後台和Adwords廣告後台的資料進行整合。這樣就可以知道廣告流量對應哪個廣告活動，哪個廣告來源和廣告關鍵字等資訊了。和上面提到的思路其實是類似的。只不過Google自動幫你做了Url的修改了而已。

IE下referer為空的解決方法
在IE下採用 window.location.href方式跳轉的話，referer值為空。而在標籤裡面的跳轉的話 referer就不會空。所以，透過以下程式碼就可以解決這個IE問題

複製程式碼程式碼如下:

function gotoUrl(url){
     if(window.VBArray){
         var gotoLink = document.createElement('a');          gotoLink .click();
     }else{
       window.location.href = url ;
禁止瀏覽器在訪問連結時不要帶上referer
我們在從一個網站點擊連結進入另一個頁面時，瀏覽器會在header裡加上Referer值，來識別這次造訪的來源頁面。但是這種標識有可能會洩漏用戶的隱私，有時候我不想讓其他人知道我是從哪裡點擊進來的，能否有手段可以讓瀏覽器不要發送Referer呢？

•使用新增的html5的解決方案,使用rel="noreferrer",聲明連接的屬性為noreferrer,目前只有chrome4 支援.
•使用中間頁面,但實際上還是發送referrer的,例如使用Google的連線轉向,noreferrer.js.
•使用javascript協定連結中轉,參考下面的說明.

新開一個窗口,相當於target="_blank":

複製代碼代碼如下:

function open_window(link){  
    var arg = 'u003cscriptu003elocation.replace("' link '")u003c/scriptu003e'; 
 ; 
} 
 

轉向到一個連接,相當於target="_self":

複製代碼代碼如下:

function redirect(link){  
    var arg ='u003cscriptu003etop.lolink.place( '; 
    var iframe = document.createElement('iframe'); 
    iframe.src='javascript:window.name;'; } 
 