前言

在JavaScript中，document對(duì)象有很多屬性，其中有3個(gè)與對(duì)網(wǎng)頁的請(qǐng)求有關(guān)的屬性，它們分別是URL、domain和referrer。

URL屬性包含頁面完整的URL，domain屬性中只包含頁面的域名，而referrer屬性中則保存著鏈接到當(dāng)前頁面的那個(gè)頁面的URL。

前面兩個(gè)很好理解，而referrer屬性簡單來說就是上一個(gè)頁面的URL。那么這個(gè)屬性具體有什么用處呢？

在H5頁面中，我們經(jīng)常要在頭部加個(gè)返回上一個(gè)頁面按鈕，就像下面這樣的：

頁面頭部

點(diǎn)擊左側(cè)的元素可以返回到上一個(gè)頁面，我們可以簡單寫一段JS代碼：

var back = document.getElementById('back'); //假設(shè)該返回按鈕元素id為back
back.onclick = function(){
 history.back(); //返回上一個(gè)頁面，也可以寫成history.go(-1)
};

或者有個(gè)更簡單的方式，不用寫這么多JS，只需直接用a標(biāo)簽表示該返回按鈕元素：

<a id="back" href="javascript:history.back();" rel="external nofollow" ></a>

咦？上面說了這么多，還是沒有說到document.referrer有什么用呀！別急，前面只是鋪墊，接下來步入正題~~~

雖說感覺上面這樣已經(jīng)基本上實(shí)現(xiàn)了返回上一頁的功能，但是有一種情況沒有考慮到（我們程序員還是要嚴(yán)謹(jǐn)一點(diǎn)嘛），就是假如該頁面是別人分享過來的而不是通過其他頁面進(jìn)入的呢？那么點(diǎn)擊該按鈕將不會(huì)有任何反應(yīng)，因?yàn)榇藭r(shí)history對(duì)象中不存在歷史記錄，也就是說這是你瀏覽器窗口打開時(shí)瀏覽的第一個(gè)頁面。

為了優(yōu)化用戶體驗(yàn)，這里通常有兩種解決方案。一種是在打開第一個(gè)頁面時(shí)不顯示返回上一頁按鈕，另一種是點(diǎn)擊直接跳轉(zhuǎn)到網(wǎng)站首頁，這可以根據(jù)產(chǎn)品需求來選擇合適的方案。

這里假設(shè)選擇第一種方案，我們可以這樣寫段JS:

if(document.referrer){
 back.style.display = 'block'; //默認(rèn)讓其隱藏，當(dāng)referrer屬性不為空時(shí)讓其顯示
}

結(jié)束語

其實(shí)判斷當(dāng)前頁面是否是用戶一開始打開的頁面，方法也不止通過判斷referrer屬性這一種方法，還可以通過history.length是否為零來判斷。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論