您好,登錄后才能下訂單哦!
這篇文章主要介紹js中document.referrer如何實(shí)現(xiàn)移動端返回上一頁,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
返回上一頁,在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>
那如果我們沒有返回上一頁的 < 的按鈕,在手機(jī)上怎么操作才會返回上一頁,比如:從微信分享進(jìn)來的,進(jìn)入的是微信內(nèi)頁,此時,內(nèi)頁就是第一頁,它沒有上一頁,要怎么返回?這時點(diǎn)返回按鈕是沒有反應(yīng)的,不是一個好的用戶體驗(yàn),十有八九的人會誤以為是BUG,這絕對是個坑爸的問題。
移動端無論是原生app還是傳統(tǒng)的網(wǎng)頁,返回上頁是一個比較強(qiáng)烈的需求。
javascript 有一個可以獲取前一頁面的URL地址的方法:document.referrer
document.referrer 的來源
referrer 屬性可返回載入當(dāng)前文檔的文檔的 URL【摘自W3CSHCOOL】, 如果當(dāng)前文檔不是通過超鏈接訪問的,那么當(dāng)前文檔的URL為NULL,這個屬性允許客戶端的 javascript 訪問 HTTP 頭部;
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,因?yàn)镮E清空了。而其他主流瀏覽器Firefox和Chrome都會保留referrer,沒辦法,只好判斷,如果是IE瀏覽器,就主動給它增加一個 referrer 。這樣的原理就是給IE瀏覽器的頁面偷偷加了個鏈接,然后自動點(diǎn)這個鏈接,于是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ù)【張鑫旭】大神的方法是,既然點(diǎn)擊上一頁沒有反應(yīng),就讓它返回首頁,從首頁再進(jìn)入其它子頁面,應(yīng)該沒啥問題。
1.根據(jù) document.referrer 的來源來判斷是否有來源信息,如果沒有,則返回首頁:
if (typeof document.referrer === '') { // 沒有來源頁面信息的時候,改成首頁URL地址 $('.jsBack').attr('href', '/'); }
這樣,當(dāng)再次點(diǎn)擊返回按鈕時,就可以返回首頁了。
2.根據(jù) document.referrer 的來源url 是否為網(wǎng)站的 url,如果判斷這個 url 的來路有問題,則屏蔽該 url 下的所有信息,比如不讓其顯示圖片等。可以有效的防止盜鏈,目前百度統(tǒng)計,google ads統(tǒng)計,CNZZ統(tǒng)計,都是用的這個方法。
無法獲取 referrer 信息的情況
下面的場景無法獲得 referrer 信息:
直接在瀏覽器中輸入地址
使用location.reload()刷新(location.href或者location.replace()刷新有信息)
在微信對話框中,點(diǎn)擊進(jìn)入微信自身瀏覽器
掃碼進(jìn)入微信或QQ的瀏覽器
直接新窗口打開一個頁面
從https的網(wǎng)站直接進(jìn)入一個http協(xié)議的網(wǎng)站(Chrome下親測)
a標(biāo)簽設(shè)置rel="noreferrer"(兼容IE7+)
meta標(biāo)簽來控制不讓瀏覽器發(fā)送referer
點(diǎn)擊 flash 內(nèi)部鏈接
Chrome4.0以下,IE 5.5+以下返回空的字符串
使用 修改 Location 進(jìn)行頁面導(dǎo)航的方法,會導(dǎo)致在IE下丟失 referrer,這可能是IE的一個BUG
跨域
<meta content="never" name="referrer">
怎么解決無法獲取 referrer 的情況,還沒有很好的方法,盡量避免吧。
以上是“js中document.referrer如何實(shí)現(xiàn)移動端返回上一頁”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。