搜尋
首頁web前端js教程javascript操作referer詳細解析_javascript技巧

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

複製程式碼


程式碼如下:


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;'; }



陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript:所有工作方式從C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)