https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/hashchange-that-can-detect-hash-changes-with-javascript/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/hashchange-that-can-detect-hash-changes-with-javascript/

JavaScriptでハッシュ(#)の変更を検知することが出来るhashchangeイベントの使い方

ハッシュ(#)の変更を検知するhashchangeイベント

JavaScriptでURLについたハッシュ(#)の値が変更されたタイミングで処理を実行させたい場合はhashchangeイベントが便利です。

検知するタイミングは一例は下記の通りです。

  • ページ内のアンカーリンクをクリックした時
  • ブラウザーの戻る・進むボタンを押した時
  • ユーザーがURLのハッシュを書き換えた時
  • 関数などの処理でlocation.hashに新しい値が代入された時(本ページのサンプルコード)

メソッド

イベントリスナータイミング
hashchangeURLのハッシュ値が変更された時に実行
hashchangeイベント

サンプルコード

サンプルコードとして、「更新」ボタンを押すと、入力欄の値を元にハッシュ値とそれが付与されたURLを出力するサンプルコードを紹介します。

値は英数にしてください。あくまでURL向けの文字列なので、日本語は無害化されます。

Output

Pug
textarea.textarea#targetText.w-100
	button#button.mb-4.text-center 更新
	p#currentHash
SCSS
#button {
	--background-color: #fff;
	--color: #576574;
	--transition: all 0.3s;
	margin-bottom: 10px;
	background-color: var(--background-color);
	padding: 10px;
	color: var(--color);
	border: 1px solid #576574;
	cursor: pointer;
	width: 120px;
	transition: var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const targetText = document.getElementById( 'targetText' );
const currentHash = document.getElementById( 'currentHash' );

document.getElementById('button').addEventListener('click', onClickAction);
window.addEventListener('hashchange', onHashChange);

currentHash.textContent = `現在のハッシュ値は「${location.hash}」です。URLは「${location.href}」です。`;

/** ハッシュ変更時の関数*/
function onHashChange() {
	currentHash.textContent = `現在のハッシュ値は「${location.hash}」です。URLは「${location.href}」です。`;
}

/** ボタンをクリックと関数を実行 */
function onClickAction() {
	//コンファームを表示
	const checkConfirm = confirm('入力欄の文字をハッシュ値として付与してそのURLとハッシュ値を表示します。よろしいですか?'); 
	if ( checkConfirm ) {
		location.hash = targetText.value;
	}
}
インストラクター
コメント

コメントを残す