1. 程式人生 > >頁面跳轉javascript操作referer

頁面跳轉javascript操作referer

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域名,其他部分不變:

1

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

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

IE5.5+ 下返回空字串

Chrome3.0+,Firefox3.5,Opera9.6,Safari3.2.2均正常返回來源網頁

window.open方式開啟新視窗

示例:

1

<a href="#" onclick="window.open('http://www.google.com')">訪問Google</a>

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

1

javascript:alert(document.referrer)

測試結果:

IE5.5+ 下返回空字串

Chrome3.0+,Firefox3.5,Opera9.6,Safari3.2.2均正常返回來源網頁

如果是同個域名下通過此方式跳轉的,那麼我們可以通過訪問windoww.opener物件去獲取丟失的referrer資訊。程式碼如下:

<script type="text/javascript">

var referrer = document.referrer;

if (!referrer) {

try {

if (window.opener) {

// IE下如果跨域則丟擲許可權異常

// Safari和Chrome下window.opener.location沒有任何屬性

referrer = window.opener.location.href;

}

}

catch (e) {}

}

</script>

跨域的話則沒轍了~

滑鼠拖拽開啟新視窗

滑鼠拖拽是現在非常流行的使用者習慣,很多瀏覽器都內建或者可以通過外掛的方式來支援滑鼠拖拽式瀏覽。但是通過這種方式開啟的頁面,基本全都丟失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 .href = url;

document.body.appendChild(gotoLink);

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 = '\u003cscript\u003elocation.replace("'+link+'")\u003c/script\u003e';

window.open('javascript:window.name;', arg);

}

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

function redirect(link){

var arg ='\u003cscript\u003etop.location.replace("'+link+'")\u003c/script\u003e';

var iframe = document.createElement('iframe');

iframe.src='javascript:window.name;';

iframe.name=arg;

document.body.appendChild(iframe);

}