JavaScript中document.referrer的用法詳解
前言
在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();" rel="external nofollow" ></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是否為零來判斷。
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
URI、URL和URN之間的區(qū)別與聯(lián)系...2006-12-12
在firefox和Chrome下關(guān)閉瀏覽器窗口無效的解決方法
首先IE是可以通過window.close()來關(guān)閉瀏覽器窗口的，但是在firefox和Chrome下是無效的，但是可以通過一些特殊的手段進(jìn)行關(guān)閉2014-01-01
JavaScript對象創(chuàng)建及繼承原理實例解剖
本文將用實例講解一下JavaScript對象創(chuàng)建及繼承原理:JavaScript中的繼承是使用原型鏈的機制,對象創(chuàng)建使用Function構(gòu)造器，感興趣的朋友可以詳細(xì)了解下本文，或許可以幫助到你2013-02-02
實現(xiàn)高性能JavaScript之執(zhí)行與加載
avaScript在瀏覽器中的性能，此問題因JavaScript的阻塞特征而復(fù)雜，也就是說JavaScript運行時其他的事情不能被瀏覽器處理，事實上，大多數(shù)瀏覽器使用單進(jìn)程處理JavaScript運行等多個任務(wù)，而同一時間只能有一個任務(wù)被執(zhí)行。2016-01-01
在JavaScript的正則表達(dá)式中使用exec()方法
這篇文章主要介紹了在JavaScript的正則表達(dá)式中使用exec()方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
JavaScript中的toDateString()方法使用詳解
這篇文章主要介紹了JavaScript中的toDateString()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
在JavaScript中，定義函數(shù)最常用的方法就是調(diào)用function語句。該語句是由function關(guān)鍵字構(gòu)成的，也是很重要的函數(shù)復(fù)用。2009-09-09
javascript 多瀏覽器 事件大全 ，對于一些事件的使用限制于觸發(fā)方法可以參考下。2010-03-03
javascript中FOREACH數(shù)組方法使用示例
本文給大家介紹的是Array.prototype.forEach()的使用方法示例，希望對大家學(xué)習(xí)javascript能夠有所幫助。2016-03-03
淺談JavaScript中的Math.atan()方法的使用
這篇文章主要介紹了JavaScript中的Math.atan()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06