首頁 > web前端 > js教程 > 主體

JavaScript中document.referrer用法的詳細解答(附上程式碼)

亚连
發布: 2018-05-19 10:43:38
原創
1898 人瀏覽過

這篇文章主要為大家介紹了關於JavaScript中document.referrer的用法,文中透過範例程式碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。

前言

在JavaScript中,document物件有許多屬性,其中有3個與對網頁的請求有關的屬性,它們分別是URL、domain和referrer。

URL屬性包含頁面完整的URL,domain屬性中只包含頁面的域名,而referrer屬性中則保存著連結到目前頁面的那個頁面的URL。

前面兩個很好理解,而referrer屬性簡單來說就是上一個頁面的URL。那麼這個屬性具體有什麼用呢?

在H5頁面中,我們常常要在頭部加個返回上一個頁面按鈕,就像下面這樣的:


頁面頭部

點擊左邊的元素可以回到上一個頁面,我們可以簡單寫一段JS程式碼:

##

var back = document.getElementById('back'); //假设该返回按钮元素id为back
back.onclick = function(){
 history.back(); //返回上一个页面,也可以写成history.go(-1)
};
登入後複製

或者有一個更簡單的方式,不用寫這麼多JS,只需直接用a標籤表示該返回按鈕元素:

#

<a id="back" href="javascript:history.back();" rel="external nofollow" ></a>
登入後複製

##咦?上面說了這麼多,還是沒有說到

document.referrer

有什麼用呀!別急,前面只是鋪墊,接下來步入正題~~~雖說感覺上面這樣已經基本上實現了返回上一頁的功能,但是有一種情況沒有考慮到(我們程式設計師還是要嚴謹一點嘛),就是假如該頁面是別人分享過來的而不是透過其他頁面進入的呢?那麼點擊該按鈕將不會有任何反應,因為此時history物件中不存在歷史記錄,也就是說這是你瀏覽器視窗開啟時瀏覽的第一個頁面。

為了優化使用者體驗,這裡通常有兩種解決方案。一種是在開啟第一個頁面時不顯示返回上一頁按鈕,另一種是點擊直接跳到網站首頁,這可以根據產品需求來選擇合適的方案。

這裡假設選擇第一個方案,我們可以這樣寫段JS:

if(document.referrer){
 back.style.display = &#39;block&#39;; //默认让其隐藏,当referrer属性不为空时让其显示
}
登入後複製

結束語 其實判斷目前頁面是否是使用者一開始開啟的頁面,方法不只透過判斷referrer屬性這一種方法,還可以透過history.length是否為零來判斷。

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

javascript的

document.referrer瀏覽器支援、失效狀況總結_基礎知識

JavaScript中的

document.referrer在各種瀏覽器測試結果_基礎知識

javascript

document.referrer 用法_ javascript技巧

#

以上是JavaScript中document.referrer用法的詳細解答(附上程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!