在JavaScript中,document對象有很多屬性,其中有3個與對網(wǎng)頁的請求有關(guān)的屬性暴备,它們分別是URL、domain和referrer们豌。
URL屬性包含頁面完整的URL涯捻,domain屬性中只包含頁面的域名,而referrer屬性中則保存著鏈接到當(dāng)前頁面的那個頁面的URL望迎。
前面兩個很好理解障癌,而referrer屬性簡單來說就是上一個頁面的URL。那么這個屬性具體有什么用處呢辩尊?
在H5頁面中涛浙,我們經(jīng)常要在頭部加個返回上一個頁面按鈕,就像下面這樣的:
點擊左側(cè)的元素可以返回到上一個頁面,我們可以簡單寫一段JS代碼:
var back = document.getElementById('back'); //假設(shè)該返回按鈕元素id為back
back.onclick = function(){
history.back(); //返回上一個頁面轿亮,也可以寫成history.go(-1)
};
或者有個更簡單的方式疮薇,不用寫這么多JS,只需直接用a標(biāo)簽表示該返回按鈕元素:
<a id="back" href="javascript:history.back();"></a>
咦我注?上面說了這么多按咒,還是沒有說到document.referrer有什么用呀!別急但骨,前面只是鋪墊励七,接下來步入正題~~~
雖說感覺上面這樣已經(jīng)基本上實現(xiàn)了返回上一頁的功能,但是有一種情況沒有考慮到(我們程序員還是要嚴(yán)謹(jǐn)一點嘛)奔缠,就是假如該頁面是別人分享過來的而不是通過其他頁面進(jìn)入的呢呀伙?那么點擊該按鈕將不會有任何反應(yīng),因為此時history對象中不存在歷史記錄添坊,也就是說這是你瀏覽器窗口打開時瀏覽的第一個頁面剿另。
為了優(yōu)化用戶體驗,這里通常有兩種解決方案贬蛙。一種是在打開第一個頁面時不顯示返回上一頁按鈕雨女,另一種是點擊直接跳轉(zhuǎn)到網(wǎng)站首頁,這可以根據(jù)產(chǎn)品需求來選擇合適的方案阳准。
這里假設(shè)選擇第一種方案氛堕,我們可以這樣寫段JS:
if(document.referrer){
back.style.display = 'block'; //默認(rèn)讓其隱藏,當(dāng)referrer屬性不為空時讓其顯示
}
結(jié)束語: 其實判斷當(dāng)前頁面是否是用戶一開始打開的頁面野蝇,方法也不止通過判斷referrer屬性這一種方法讼稚,還可以通過history.length是否為零來判斷。
本文為原創(chuàng)文章绕沈,轉(zhuǎn)載請注明出處锐想,謝謝!