移動端返回上一頁，剛需！document.referrer 詳解

返回上一頁，在PC端咱們可使用：history.go(-1)或者history.back()，能夠正常返回第一層。這樣，咱們不須要上一頁的 url 具體是什麼，只要使用 history 通常都沒啥問題。

 

可是在移動端，若是想要返回上一頁。好比從A頁面跳到B頁面，若是B頁面想返回A頁面，爲了防止不會跳錯，必需要有一個 <  按鈕，給它加 history.go(-1) ，返回上一層。

<a href="javascript:history.go(-1)" class="header-back jsBack">返回</a>

那若是咱們沒有返回上一頁的 < 的按鈕，在手機上怎麼操做纔會返回上一頁，好比：從微信分享進來的，進入的是微信內頁，此時，內頁就是第一頁，它沒有上一頁，要怎麼返回？這時點返回按鈕是沒有反應的，不是一個好的用戶體驗，十有八九的人會誤覺得是BUG，這絕對是個坑爸的問題。

移動端不管是原生app仍是傳統的網頁，返回上頁是一個比較強烈的需求。

javascript 有一個能夠獲取前一頁面的URL地址的方法：document.referrer

document.referrer 的來源

1. referrer 屬性可返回載入當前文檔的文檔的 URL【摘自W3CSHCOOL】, 若是當前文檔不是經過超連接訪問的，那麼當前文檔的URL爲NULL，這個屬性容許客戶端的 javascript 訪問 HTTP 頭部；
2. referrer 屬性，咱們能夠從 http 頭部獲取

document.referrer 的兼容性

document.referrer IE7都支持，它的兼容性比較高，Android 5.0開始支持，iOS都支持，PC端瀏覽器從IE7就開始支持了，兼容性沒有什麼大的問題。

可是有個小小的問題，就是 IE 會主動清除 referref 屬性。在IE中用javascript作跳轉，好比用window.location.href = 「」; google若是使用document.referrer沒法取到瀏覽器請求的HTTP referrer，由於IE清空了。而其餘主流瀏覽器Firefox和Chrome都會保留referrer，沒辦法，只好判斷，若是是IE瀏覽器，就主動給它增長一個 referrer 。這樣的原理就是給IE瀏覽器的頁面偷偷加了個連接，而後自動點這個連接，因而referrer就能保留了。

 

var url = 'http://www.jb51.net';   
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || /MSIE(\d+\.\d+);/.test(navigator.userAgent))   
{   
    var referLink = document.createElement('a');   
    referLink.href = url;   
    document.body.appendChild(referLink);   
    referLink.click();   
}   
else  
{   
    location.href = url;   
}

document.referrer 的牛X作法

解決移動端返回上一頁的問題，就是上面所說的微信分享的問題？根據【張鑫旭】大神的方法是，既然點擊上一頁沒有反應，就讓它返回首頁，從首頁再進入其它子頁面，應該沒啥問題。

• 根據 document.referrer 的來源來判斷是否有來源信息，若是沒有，則返回首頁：

 

if (typeof document.referrer === '') {
    // 沒有來源頁面信息的時候，改爲首頁URL地址
    $('.jsBack').attr('href', '/');
}

項目中應用方法:

if( document.referrer.indexOf('news_detail') > 0){
         alert(document.referrer);
        $(".back_news").attr('href' , '/news/news/index.html');
}

 

這樣，當再次點擊返回按鈕時，就能夠返回首頁了。

• 根據 document.referrer 的來源url 是否爲網站的 url，若是判斷這個 url 的來路有問題，則屏蔽該 url 下的全部信息，好比不讓其顯示圖片等。能夠有效的防止盜鏈，目前百度統計，google ads統計，CNZZ統計，都是用的這個方法。

 

沒法獲取 referrer 信息的狀況

下面的場景沒法得到 referrer 信息，如下前8條屬於【張鑫旭】：

1. 直接在瀏覽器中輸入地址
2. 使用location.reload()刷新（location.href或者location.replace()刷新有信息）
3. 在微信對話框中，點擊進入微信自身瀏覽器
4. 掃碼進入微信或QQ的瀏覽器
5. 直接新窗口打開一個頁面
6. 從https的網站直接進入一個http協議的網站（Chrome下親測）
7. a標籤設置rel="noreferrer"（兼容IE7+）
8. meta標籤來控制不讓瀏覽器發送referer
9. 點擊 flash 內部連接
10. Chrome4.0如下，IE 5.5+如下返回空的字符串
11. 使用 修改 Location 進行頁面導航的方法，會致使在IE下丟失 referrer，這多是IE的一個BUG
12. 跨域

13. <meta content="never" name="referrer">

    怎麼解決沒法獲取 referrer 的狀況，尚未很好的方法，儘可能避免吧

 

　 　-------------------轉載-------------------