S獲取上一訪問頁面URL地址document.referrer實踐

這篇文章發佈於 2017年02月13日，星期一，22:55，歸類於 JS實例。 閱讀 54267 次, 今日 51 次 46 條評論

by zhangxinxu from www.zhangxinxu.com/wordpress/?… 本文可全文轉載，但需獲得原做者書面許可，同時保留原做者和出處，摘要引流則隨意。 1、JS獲取前一個訪問頁面的URL地址document.referrer 要獲取前一個訪問頁面的URL地址先後端語言均可以，例如PHP的是$_SERVER['HTTP_REFERER']，JavaScript的就是document.referrer。

咱們日常開發，雖然和URL打交道也算比較頻繁，可是，彷佛不多使用document.referrer。我起初覺得是兼容性很差，後來測試發現ie7都支持，那就奇怪了，爲什麼document.referrer用的很少呢？

我想了一下，可能有下面幾個緣由：

後端小夥伴幫咱們搞定了相關需求； 只有一些訪問數據統計腳本才很是在乎上一個訪問頁面的url地址是什麼； 若是咱們但願實現的功能是返回上一頁，可使用history.go(-1)或者history.back()，咱們並不須要知道上一個訪問頁面具體的地址是什麼。 綜合以上幾點，致使平時開發不多使用document.referrer。

可是最近作了一個移動端項目，是我第一次在正式項目中使用document.referrer，這裏跟你們分享一下相關的實踐。

場景是這樣的，移動端不管是原生app仍是傳統的網頁，返回上頁是一個比較強烈的需求，以下截圖所示： 返回上一頁截圖示意

幾乎全部的內頁都有這麼一個返回上一頁的按鈕，例如這個頁面（點擊體驗）。

此返回上一頁相關HTML代碼以下：

返回 在大部分場景下，上面辦法能夠知足咱們的交互需求，可是，在有些時候，上面的代碼就有些心有力而氣不足，由於當前頁面的referrer並不老是存在的。

比方說用戶是經過微信分享進來的，直接進入了內頁，此時是沒有上一頁的，返回按鈕再怎麼點擊都沒有任何反應，就會讓用戶很奇怪，十有八九會認爲是實現了bug，則會讓用戶對產品的品質抱有疑慮，那問題可就大了。

怎麼辦呢！後來我想了一招，那就是若是發現瀏覽器沒有上一頁來源信息，咱們就把返回按鈕的連接改爲首頁的連接地址，這樣不管何時，用戶點擊返回按鈕必定是會有反應的，而且返回首頁從邏輯上講也是合情合理的。而這裏判斷是否有沒有來源信息就是使用這裏的document.referrer，當瀏覽器得不到上一頁的來源信息的時候，document.referrer的返回值就是空字符串''，因而乎，就有相似下面的代碼：

if (document.referrer === '') { // 沒有來源頁面信息的時候，改爲首頁URL地址 $('.jsBack').attr('href', '/'); } 因而乎，返回按鈕的邏輯就完美無缺了。

2、哪些場景下沒法得到上一頁referrer信息 直接在瀏覽器地址欄中輸入地址； 使用location.reload()刷新（location.href或者location.replace()刷新有信息）； 在微信對話框中，點擊連接進入微信自身的瀏覽器； 掃碼進入QQ或者微信的瀏覽器； 直接新窗口打開一個頁面； 2017.8.3更新 新版本Chrome測試，新窗口頁面依然有document.referrer 從https的網站直接進入一個http協議的網站（Chrome下親測）； a標籤設置rel="noreferrer"（兼容IE7+）； meta標籤來控制不讓瀏覽器發送referer； 例如：

兼容性以下圖： meta中的referrers兼容性截圖

iOS瀏覽器目前仍是使用的老版本的規範值，包括：never, always, origin, default。對於Android瀏覽器，5.0版本開始支持。基本上，在移動端，使用meta標籤來控制referer信息的發送與否已經能夠在實際項目中使用了。

等等。 有人可能迫切想知道如何讓從https的網站直接進入一個http協議的網站也有document.referrer信息，這方面並非我擅長的地方，因此我也不清楚應該如何解決此問題，或許須要服務器配置那邊配合點什麼。

更新於翌日 下面是小新同行的真知灼見：

HTTPS turns off HTTP Referrers to HTTP websites. (默認是關閉的，安全緣由。) 開啓的話在meta裏設置，可能如今的流行的最新版瀏覽器兼容會好點！ 參考： smerity.com/articles/20… 官方這麼說的： www.w3.org/Protocols/r…

3、結束語 明天情人節，買了巧克力，訂了法式大餐，有法式蝸牛，第一次吃，內心總有點毛毛的，讓我想起來貝爺，該不會也是那種畫風吧。

貝爺吃東西

平時和同事一塊兒吃飯的時候，會傳授本身和夫人的相處之道。

很重要的一點就是相敬如賓，你們平等，比方說：當意見不合的時候就聽老婆的，當意見統一的時候就聽個人。

我也有婆媳問題，我之前的作法是在老婆面前說我媽不是這樣的，巴拉巴拉，有用嗎，收效甚微，後來我聰明瞭，一旦老婆大人不開心了，我立刻附和：「就是啊，我媽怎麼這樣啊，在想些什麼呢，太離譜了，我這個兒子都看不下去……」，嘿，你別說，只要這麼一附和，老婆立馬內心就爽了，生氣嘛都是生的情緒，你一順，這態度立馬就會轉變：「你也別這麼說，你媽其實我知道的，就是……我也不是……」，對吧，一會兒什麼事情就沒有，風和日麗，陽光明媚。我呢也能夠繼續開開心心釣魚，家和萬事興。

哦呵呵，但願明天一切順利，明天沒得午覺睡了，因此今天要早點休息，12點以前必定要蓋上被子。

也祝你們明天節日快樂！

曾經我也是也是一隻單身狗，就像下面這樣：

單身狗

是前端改變了個人人生。因此，前端在手，美人我有！只要前端學得好，女友她跑不了！