JavaScript での document.referrer の使用法に対する詳細な回答 (コードが添付されています)

この記事では主に JavaScript での document.referrer の使用法をサンプル コードを通じて詳しく紹介します。必要な方は以下を参照してください。

はじめに

JavaScript では、ドキュメント オブジェクトには多くの属性があり、その中には Web ページのリクエストに関連する 3 つの属性 (URL、ドメイン、リファラー) が含まれます。

URL 属性にはページの完全な URL が含まれ、domain 属性にはページのドメイン名のみが含まれ、referrer 属性には現在のページにリンクされているページの URL が保存されます。

最初の 2 つは理解しやすく、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

上記で前ページに戻る機能は大まかに実装できたように感じますが、一つだけ取り込んでいない状況があります。アカウント (私たちプログラマはさらに厳密にする必要があります)、つまり、そのページが他のページから入力されるのではなく、他の人によって共有されている場合はどうなるでしょうか?この時点では履歴オブジェクトに履歴レコードがないため、ボタンをクリックしても何も反応しません。これは、これがブラウザ ウィンドウを開いたときに最初に閲覧されるページであることを意味します。

ユーザー エクスペリエンスを最適化するには、通常 2 つの解決策があります。 1 つは最初のページを開いたときに「前のページに戻る」ボタンを表示しない方法、もう 1 つは直接クリックして Web サイトのトップページにジャンプする方法です。これにより、製品の要件に基づいて適切なソリューションを選択できます。

最初のオプションが選択されたと仮定すると、次のような JS を書くことができます:

if(document.referrer){
 back.style.display = 'block'; //默认让其隐藏，当referrer属性不为空时让其显示
}

結論

実際、現在のページが、最初に開いたユーザーはリファラーの判定だけでなく、history.lengthが0かどうかでも属性メソッドを判定できます。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptのdocument.referrerブラウザ対応、障害まとめ_基礎知識

JavaScriptのdocument.referrer各種ブラウザでのテスト結果_基礎知識

document.referrer

use_javascript のヒント

以上がJavaScript での document.referrer の使用法に対する詳細な回答 (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。