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

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

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

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

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

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

document.referrer 的來(lái)源

1. referrer 屬性可返回載入當(dāng)前文檔的文檔的 URL【摘自W3CSHCOOL】, 如果當(dāng)前文檔不是通過(guò)超鏈接訪問(wèn)的，那么當(dāng)前文檔的URL為NULL，這個(gè)屬性允許客戶(hù)端的 javascript 訪問(wèn) HTTP 頭部；
2. referrer 屬性，我們可以從 http 頭部獲取

document.referrer 的兼容性

document.referrer IE7都支持，它的兼容性比較高，Android 5.0開(kāi)始支持，iOS都支持，PC端瀏覽器從IE7就開(kāi)始支持了，兼容性沒(méi)有什么大的問(wèn)題。

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

var url = '//m.survivalescaperooms.com'; 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做法

解決移動(dòng)端返回上一頁(yè)的問(wèn)題，就是上面所說(shuō)的微信分享的問(wèn)題？根據(jù)【張?chǎng)涡瘛看笊竦姆椒ㄊ牵热稽c(diǎn)擊上一頁(yè)沒(méi)有反應(yīng)，就讓它返回首頁(yè)，從首頁(yè)再進(jìn)入其它子頁(yè)面，應(yīng)該沒(méi)啥問(wèn)題。

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

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

這樣，當(dāng)再次點(diǎn)擊返回按鈕時(shí)，就可以返回首頁(yè)了。

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

無(wú)法獲取 referrer 信息的情況

下面的場(chǎng)景無(wú)法獲得 referrer 信息，以下前8條屬于【張?chǎng)涡瘛浚?/p>

1. 直接在瀏覽器中輸入地址
2. 使用location.reload()刷新（location.href或者location.replace()刷新有信息）
3. 在微信對(duì)話(huà)框中，點(diǎn)擊進(jìn)入微信自身瀏覽器
4. 掃碼進(jìn)入微信或QQ的瀏覽器
5. 直接新窗口打開(kāi)一個(gè)頁(yè)面
6. 從https的網(wǎng)站直接進(jìn)入一個(gè)http協(xié)議的網(wǎng)站（Chrome下親測(cè)）
7. a標(biāo)簽設(shè)置rel="noreferrer"（兼容IE7+）
8. meta標(biāo)簽來(lái)控制不讓瀏覽器發(fā)送referer
9. 點(diǎn)擊 flash 內(nèi)部鏈接
10. Chrome4.0以下，IE 5.5+以下返回空的字符串
11. 使用 修改 Location 進(jìn)行頁(yè)面導(dǎo)航的方法，會(huì)導(dǎo)致在IE下丟失 referrer，這可能是IE的一個(gè)BUG
12. 跨域

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

怎么解決無(wú)法獲取 referrer 的情況，還沒(méi)有很好的方法，盡量避免吧。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！