ホームページ > 記事 > ウェブフロントエンド > 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
if(document.referrer){ back.style.display = 'block'; //默认让其隐藏,当referrer属性不为空时让其显示 }
結論
実際、現在のページが、最初に開いたユーザーはリファラーの判定だけでなく、history.lengthが0かどうかでも属性メソッドを判定できます。 上記は私があなたのためにまとめたものです。 関連記事:JavaScriptのdocument.referrerブラウザ対応、障害まとめ_基礎知識
JavaScriptのdocument.referrer各種ブラウザでのテスト結果_基礎知識
document.referrer以上がJavaScript での document.referrer の使用法に対する詳細な回答 (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。