javascript操作referer詳細(xì)解析
Referrer的重要性
HTTP請(qǐng)求中有一個(gè)referer的報(bào)文頭,用來(lái)指明當(dāng)前流量的來(lái)源參考頁(yè)。例如在www.sina.com.cn/sports/上點(diǎn)擊一個(gè)鏈接到達(dá)cctv.com首頁(yè),那么就referrer就是www.sina.com.cn/sports/了。在Javascript中,我們可以通過(guò)document.referrer來(lái)獲取同樣的信息。通過(guò)這個(gè)信息,我們就可以知道訪客是從什么渠道來(lái)到當(dāng)前頁(yè)面的。這對(duì)于Web Analytics來(lái)說(shuō),是非常重要的,這可以告訴我們不同渠道帶來(lái)的流量的分布情況,還有用戶搜索的關(guān)鍵詞等,都是通過(guò)分析這個(gè)referrer信息來(lái)獲取的。
但是,出于各種各樣的原因,有時(shí)候Javascript中讀到的referrer卻是空字符串。下面總結(jié)一下哪些情況下會(huì)丟失referrer。
修改Location對(duì)象進(jìn)行頁(yè)面導(dǎo)航
Location對(duì)象是一個(gè)用于頁(yè)面導(dǎo)航的非常實(shí)用的對(duì)象。因?yàn)樗试S你只變更Url的其中一部分。例如從cn域名切換到com域名,其他部分不變:
window.location.hostname = "example.com";
但是,通過(guò)修改Location進(jìn)行頁(yè)面導(dǎo)航的方法,會(huì)導(dǎo)致在IE下丟失Referrer。
IE5.5+ 下返回空字符串
Chrome3.0+,F(xiàn)irefox3.5,Opera9.6,Safari3.2.2均正常返回來(lái)源網(wǎng)頁(yè)
window.open方式打開(kāi)新窗口
示例:
<a href="#" onclick="window.open('http://www.google.com')">訪問(wèn)Google</a>
點(diǎn)擊此鏈接會(huì)在新窗口打開(kāi)Google網(wǎng)站,我們?cè)诘刂窓谥休斎胍韵耲s代碼就可以看到發(fā)送的referrer了。
javascript:alert(document.referrer)
測(cè)試結(jié)果:
IE5.5+ 下返回空字符串
Chrome3.0+,F(xiàn)irefox3.5,Opera9.6,Safari3.2.2均正常返回來(lái)源網(wǎng)頁(yè)
如果是同個(gè)域名下通過(guò)此方式跳轉(zhuǎn)的,那么我們可以通過(guò)訪問(wèn)windoww.opener對(duì)象去獲取丟失的referrer信息。代碼如下:
<script type="text/javascript">
var referrer = document.referrer;
if (!referrer) {
try {
if (window.opener) {
// IE下如果跨域則拋出權(quán)限異常
// Safari和Chrome下window.opener.location沒(méi)有任何屬性
referrer = window.opener.location.href;
}
}
catch (e) {}
}
</script>
跨域的話則沒(méi)轍了~
鼠標(biāo)拖拽打開(kāi)新窗口
鼠標(biāo)拖拽是現(xiàn)在非常流行的用戶習(xí)慣,很多瀏覽器都內(nèi)置或者可以通過(guò)插件的方式來(lái)支持鼠標(biāo)拖拽式瀏覽。但是通過(guò)這種方式打開(kāi)的頁(yè)面,基本全都丟失referrer。并且,這種情況下,也無(wú)法使用window.opener的方式去獲取丟失的referrer了。
已測(cè)試:
Maxthon2.5.2,F(xiàn)irefox的FireGesture插件,Chrome3.0+,Opera9.6,Safari3.2。
點(diǎn)擊Flash內(nèi)部鏈接
點(diǎn)擊Flash上到達(dá)另外一個(gè)網(wǎng)站的時(shí)候,Referrer的情況就比較雜亂了。
IE下,通過(guò)客戶端Javascript的document.referrer讀取到的值是空的,但是如果你使用流量監(jiān)控軟件看一下的話,你會(huì)發(fā)現(xiàn),實(shí)際上HTTP請(qǐng)求中的Referer報(bào)文頭卻是有值的,這可能是IE實(shí)現(xiàn)的Bug。同時(shí),這個(gè)值指向的是Flash文件的地址,而不是來(lái)源網(wǎng)頁(yè)的地址。
Chrome4.0下點(diǎn)擊Flash到達(dá)新窗口之后,Referrer也是指向的Flash文件的地址,而不是源網(wǎng)頁(yè)的地址。
Chrome3.0和Safari3.2是一樣的,都是會(huì)丟失Referrer信息。
Opera則和Firefox一樣,Referrer的值都是來(lái)源網(wǎng)頁(yè)的地址。
HTTPS跳轉(zhuǎn)到HTTP
從HTTPS的網(wǎng)站跳轉(zhuǎn)到HTTP的網(wǎng)站時(shí),瀏覽器是不會(huì)發(fā)送referrer的。這個(gè)各大瀏覽器的行為是一樣的。
例如,我們?cè)贖TTPS下使用Google Reader或是Gmail的時(shí)候,點(diǎn)擊某個(gè)鏈接去到另外一個(gè)網(wǎng)站,那么從技術(shù)上來(lái)說(shuō),這樣的訪問(wèn)和用戶直接鍵入網(wǎng)址訪問(wèn)是沒(méi)有什么分別的。
Referrer丟失對(duì)于廣告流量監(jiān)控的影響
Referrer如果丟失,Web Analytics就會(huì)丟掉很重要的一部分信息了,特別對(duì)于廣告流量來(lái)說(shuō),就無(wú)法知道實(shí)際來(lái)源了。目前國(guó)內(nèi)好多用了Google Adsense廣告的網(wǎng)站,都使用了window.open的方式來(lái)打開(kāi)廣告鏈接,因此IE下會(huì)丟失Referrer,而我們知道,IE是目前市場(chǎng)份額最大的瀏覽器,因此其影響是很大的。很多流量統(tǒng)計(jì)工具會(huì)因此將這部分流量歸入“直接流量”,和用戶直接鍵入網(wǎng)址等價(jià)了。
對(duì)于這樣的情況,需要讓廣告投放者在投放廣告的時(shí)候,給著陸頁(yè)面的Url加上特定的跟蹤參數(shù)。
例如,某個(gè)Flash廣告,點(diǎn)擊之后到達(dá)的網(wǎng)址是http://www.example.com/,為了監(jiān)控此流量是從哪個(gè)渠道過(guò)來(lái)的,我們可以修改此投放的著陸Url,改成http://www.example.com/?src=sina,類似這種方式,然后在著陸頁(yè)面中使用Javascript代碼提取此src參數(shù),這樣就可以得到廣告來(lái)源信息。
在投放Google Adwords的時(shí)候,后臺(tái)系統(tǒng)有一個(gè)“自動(dòng)標(biāo)記”的選項(xiàng),當(dāng)啟用此選項(xiàng)的時(shí)候,Google在生成所有廣告的著陸頁(yè)面Url的時(shí)候,就會(huì)自動(dòng)加上一個(gè)gclid的參數(shù),這個(gè)參數(shù)能夠?qū)oogle Analytics后臺(tái)和Adwords廣告后臺(tái)的數(shù)據(jù)進(jìn)行整合。這樣就可以知道廣告流量對(duì)應(yīng)于哪個(gè)廣告系列,哪個(gè)廣告來(lái)源和廣告關(guān)鍵詞等信息了。和上面提到的思路其實(shí)是類似的。只不過(guò)Google自動(dòng)幫你做了Url的修改了而已。
IE下referer為空的解決辦法
在IE下采用 window.location.href方式跳轉(zhuǎn)的話,referer值為空。而在標(biāo)簽里面的跳轉(zhuǎn)的話 referer就不會(huì)空。所以,通過(guò)以下代碼就可以解決這個(gè)IE問(wèn)題
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;
}
}
禁止瀏覽器在訪問(wèn)鏈接時(shí)不要帶上referer
我們?cè)趶囊粋€(gè)網(wǎng)站點(diǎn)擊鏈接進(jìn)入另一個(gè)頁(yè)面時(shí),瀏覽器會(huì)在header里加上Referer值,來(lái)標(biāo)識(shí)這次訪問(wèn)的來(lái)源頁(yè)面。但是這種標(biāo)識(shí)有可能會(huì)泄漏用戶的隱私,有時(shí)候我不想讓其他人知道我是從哪里點(diǎn)擊進(jìn)來(lái)的,能否有手段可以讓瀏覽器不要發(fā)送Referer呢?
•使用新增的html5的解決方案,使用rel="noreferrer",聲明連接的屬性為noreferrer,目前只有chrome4+支持.
•使用中間頁(yè)面,但實(shí)際上還是發(fā)送referrer的,比如使用Google的連接轉(zhuǎn)向,noreferrer.js.
•使用javascript協(xié)議鏈接中轉(zhuǎn),參見(jiàn)下面的說(shuō)明.
新開(kāi)一個(gè)窗口,相當(dāng)于target="_blank":
function open_window(link){
var arg = '\u003cscript\u003elocation.replace("'+link+'")\u003c/script\u003e';
window.open('javascript:window.name;', arg);
}
</CODE>
轉(zhuǎn)向到一個(gè)連接,相當(dāng)于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);
}
</CODE>
相關(guān)文章
微信小程序一周時(shí)間表功能實(shí)現(xiàn)
這篇文章主要介紹了微信小程序一周時(shí)間表功能實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10小程序卡片切換效果組件wxCardSwiper的實(shí)現(xiàn)
這篇文章主要介紹了小程序卡片切換效果組件wxCardSwiper的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02JS變量中有var定義和無(wú)var定義的區(qū)別以及es6中l(wèi)et命令和const命令
這篇文章主要介紹了JS變量中有var定義和無(wú)var定義的區(qū)別以及es6中l(wèi)et命令和const命令,需要的朋友可以參考下2017-02-02React Native JSI實(shí)現(xiàn)RN與原生通信的示例代碼
本文主要介紹了React Native JSI實(shí)現(xiàn)RN與原生通信的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08html+css+js實(shí)現(xiàn)簡(jiǎn)易版ChatGPT聊天機(jī)器人
OpenAI的一款聊天機(jī)器人模型ChatGPT爆火,本篇文章用一百行html+css+js代碼給大家制作一款簡(jiǎn)易的聊天機(jī)器人。2023-02-02Echarts.js實(shí)現(xiàn)水滴球和海洋效果
這篇文章介紹了Echarts.js實(shí)現(xiàn)水滴球和海洋效果的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04JavaScript跨平臺(tái)的開(kāi)源框架NativeScript
本文給大家分享的是一款使用javascript來(lái)構(gòu)建跨平臺(tái)原生移動(dòng)應(yīng)用的開(kāi)源框架--NativeScript,可以使用JavaScript開(kāi)發(fā)跨平臺(tái)、真正原生的iOS, Android 和 Windows 移動(dòng)App。開(kāi)發(fā)人員使用NativeScript提供的庫(kù)來(lái)構(gòu)建應(yīng)用UI,其抽象了各種原生平臺(tái)之間的不同。2015-03-03javascript 日期時(shí)間 轉(zhuǎn)換的方法
javascript 日期時(shí)間 轉(zhuǎn)換的方法,需要的朋友可以參考一下2013-02-02