#036
posted on 2021.04.22 (Thu) 2021.12.18 (Sat)

別のページからの流入時に自ページのURLのアンカーリンク(フラグメント識別子)を取得。

別ページから流入してきた自ページのURLが「#」付きのページ内のアンカーリンク(URL fragment)だった場合に、特定のアンカーリンクで特定の処理をしたいときのメモ。

 

windowオブジェクトが持つlocationオブジェクトのプロパティーの中から情報を取得する。

※ windowオブジェクトはグローバルオブジェクトなので、「window.location」の「window.」は省略できる。

 

 

現在のページURLにアンカーリンク「#foo」があるか判定する場合

現在のURLにフラグメント識別子が存在し、かつ「#foo」だった場合に任意の処理を実行。

let urlHash = location.hash;
if(urlHash && urlHash === '#foo'){
	//処理...
}

location.hash : 現在のURLのフラグメント識別子を値として持つ。フラグメント識別子が無い場合は空の文字列を返す。別のフラグメント識別子を代入すれば、現在のフラグメント識別子を変更でき、代入したアンカーリンクの位置に移動する。

 

 

この記事のURL

https://memo.ag2works.tokyo/post-1654/

Copyコピー
この記事のタイトル

別のページからの流入時に自ページのURLのアンカーリンク(フラグメント識別子)を取得。 | memo メモ [AG2WORKS]

Copyコピー
この記事のリンクタグ

<a href="https://memo.ag2works.tokyo/post-1654/" target="_blank" rel="noopener">別のページからの流入時に自ページのURLのアンカーリンク(フラグメント識別子)を取得。 | memo メモ [AG2WORKS]</a>

Copyコピー
※ フィールドをクリックでコピーするテキストの編集ができます。

この記事へのコメント

コメントの書き込みはまだありません。

  • コメント内のタグはエスケープ処理され、文字列として出力されます。
  • セキュリティーのため、投稿者のIPアドレスは取得されます。
  • 管理者が内容を不適切と判断したコメントは削除されます。
  • このフォームにはスパム対策として、Googleの提供するreCAPTCHAシステムが導入されています。
    (Google Privacy Policy and Terms of Service.)