document.referrerの使い方

1311 ワード

JavaScriptでは、documentオブジェクトには多くの属性があります.この中には、URL、domain、referrerの3つがあります.
URL属性はページの完全なURLを含み、domain属性にはページのドメイン名のみが含まれ、referrer属性には現在のページにリンクされたそのページのURLが保存されています.
前の二つはよく分かりますが、referrer属性は簡単に言えば前のページのURLです.この属性は具体的にどのような用途がありますか?
H 5ページの中で、私達はいつも頭に前のページに戻るボタンを付けます.
ページのヘッダ
左の要素をクリックして前のページに戻ります.簡単にJSコードを書くことができます.
var back = document.getElementById('back');   //         id back
back.onclick = function(){
    history.back();    //       ,     history.go(-1)
};
あるいはもっと簡単な方法があります.JSはこんなに多く書かなくてもいいです.このリターンボタンの要素をaタグで直接表してもいいです.

えっ?これだけ言っても、document.referrerは何の役にも立たないですよ.急がないでください.前はクッションだけです.これから本題に入ります.
上のように基本的に前のページに戻る機能が実現されたと思いますが、他のページを通じて入ってきたのではなく、このページが他のページで共有されているということを考慮していない場合がありますか?このボタンをクリックすると何の反応もありません.この時historyオブジェクトには履歴がありません.つまりブラウザのウィンドウが開いている時に最初に閲覧したページです.
ユーザー体験を最適化するために、ここでは通常2つのソリューションがあります.一つは最初のページを開く時に前のページに戻るボタンを表示しないこと、もう一つはクリックして直接ウェブサイトのトップページにジャンプすることです.これは製品のニーズに応じて適切な方案を選択できます.
ここで最初の案を選択すると、JSのセクションをこのように書くことができます.
if(document.referrer){
    back.style.display = 'block';   //      , referrer          
}
終了語:現在のページはユーザーが最初に開いたページかどうかを判断します.方法はreferrer属性を判断する方法だけではなく、history.lengthがゼロかどうかを判断します.
本文はオリジナルの文章です.転載は出所を明記してください.ありがとうございます.