這篇文章主要介紹js中document.referrer如何實現(xiàn)移動端返回上一頁，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)從2013年開始，先為袁州等服務(wù)建站，袁州等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為袁州企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

返回上一頁，在PC端我們可以使用：history.go(-1)或者h(yuǎn)istory.back()，可以正常返回第一層。這樣，我們不需要上一頁的 url 具體是什么，只要使用 history 一般都沒啥問題。

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

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

那如果我們沒有返回上一頁的 < 的按鈕，在手機上怎么操作才會返回上一頁，比如：從微信分享進來的，進入的是微信內(nèi)頁，此時，內(nèi)頁就是第一頁，它沒有上一頁，要怎么返回？這時點返回按鈕是沒有反應(yīng)的，不是一個好的用戶體驗，十有八九的人會誤以為是BUG，這絕對是個坑爸的問題。

移動端無論是原生app還是傳統(tǒng)的網(wǎng)頁，返回上頁是一個比較強烈的需求。

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

document.referrer 的來源

1. referrer 屬性可返回載入當(dāng)前文檔的文檔的 URL【摘自W3CSHCOOL】, 如果當(dāng)前文檔不是通過超鏈接訪問的，那么當(dāng)前文檔的URL為NULL，這個屬性允許客戶端的 javascript 訪問 HTTP 頭部；

2. referrer 屬性，我們可以從 http 頭部獲取

document.referrer 的兼容性

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

但是有個小小的問題，就是 IE 會主動清除 referref 屬性。在IE中用javascript做跳轉(zhuǎn)，比如用window.location.href = “”; google如果使用document.referrer無法取到瀏覽器請求的HTTP referrer，因為IE清空了。而其他主流瀏覽器Firefox和Chrome都會保留referrer，沒辦法，只好判斷，如果是IE瀏覽器，就主動給它增加一個 referrer 。這樣的原理就是給IE瀏覽器的頁面偷偷加了個鏈接，然后自動點這個鏈接，于是referrer就能保留了。

var url = 'https://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做法

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

1.根據(jù) document.referrer 的來源來判斷是否有來源信息，如果沒有，則返回首頁：

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

這樣，當(dāng)再次點擊返回按鈕時，就可以返回首頁了。

2.根據(jù) document.referrer 的來源url 是否為網(wǎng)站的 url，如果判斷這個 url 的來路有問題，則屏蔽該 url 下的所有信息，比如不讓其顯示圖片等。可以有效的防止盜鏈，目前百度統(tǒng)計，google ads統(tǒng)計，CNZZ統(tǒng)計，都是用的這個方法。

無法獲取 referrer 信息的情況

下面的場景無法獲得 referrer 信息：

1. 直接在瀏覽器中輸入地址

2. 使用location.reload()刷新（location.href或者location.replace()刷新有信息）

3. 在微信對話框中，點擊進入微信自身瀏覽器

4. 掃碼進入微信或QQ的瀏覽器

5. 直接新窗口打開一個頁面

6. 從https的網(wǎng)站直接進入一個http協(xié)議的網(wǎng)站（Chrome下親測）

7. a標(biāo)簽設(shè)置rel="noreferrer"（兼容IE7+）

8. meta標(biāo)簽來控制不讓瀏覽器發(fā)送referer

9. 點擊 flash 內(nèi)部鏈接

10. Chrome4.0以下，IE 5.5+以下返回空的字符串

11. 使用 修改 Location 進行頁面導(dǎo)航的方法，會導(dǎo)致在IE下丟失 referrer，這可能是IE的一個BUG

12. 跨域

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

怎么解決無法獲取 referrer 的情況，還沒有很好的方法，盡量避免吧。

以上是“js中document.referrer如何實現(xiàn)移動端返回上一頁”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：js中document.referrer如何實現(xiàn)移動端返回上一頁
本文地址：http://chinadenli.net/article34/ggjise.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站導(dǎo)航、網(wǎng)站改版、面包屑導(dǎo)航、ChatGPT、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)