onhashchange - フラグメント識別子の変更時に発火する

投稿日:2015/12/02

JavaScriptの、イベントハンドラのonhashchangeは、フラグメント識別子が変更した時に発火して処理を実行します。

説明

https://syncer.jp/index.html#section-1

イベントハンドラのonhashchangeは、フラグメント識別子の変更時に発火するイベントです。フラグメント識別子とは、ページ内リンクなどで移動した時にURLに付くハッシュ文字(#)以下の識別子で、ドキュメントの位置を示すものです。このイベントは、windowオブジェクトに設定します。

サンプルコード

// 処理を定義
var action = function() {
	// 処理内容
}

// イベントを設定 ( addEventListener )
window.addEventListener( "hashchange", action ) ;

// イベントを削除
window.removeEventListener( "hashchange", action ) ;

// イベントを設定 ( onhashchange )
window.onhashchange = function() {
	// 処理内容
}

// イベントを削除
window.onhashchange = null ;

デモ

ページ内リンクをいくつか用意したのでクリックしてみて下さい。フラグメント識別子が変わることでイベントが発生します。イベントが発生するごとに、発生回数がカウントアップされます。URLアドレス欄を確認したい人は、大変お手数ですが、新しくウィンドウを開いて下さい。

RUN
HTML
CSS
JavaScript

<p><a href="" target="_blank">新しいウィンドウで開く</a></p> <ol> <li><a href="#section-1">1章</a></li> <li><a href="#section-2">2章</a></li> <li><a href="#section-3">3章</a></li> <li><a href="#section-4">4章</a></li> <li><a href="#section-5">5章</a></li> </ol> <h2 id="section-1">1章</h2> <h2 id="section-2">2章</h2> <h2 id="section-3">3章</h2> <h2 id="section-4">4章</h2> <h2 id="section-5">5章</h2> <p class="output">発生回数: <span id="output">0</span></p> <p id="error" class="error none"></p> <p><button id="reset" class="button">リセット</button></p>

body { height: 1000px ; } .output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } a { font-size: 16px ; font-weight: 700 ; } ol { overflow: hidden ; list-style-type: none ; margin: 0 ; padding: 0 ; } ol li { float: left ; } ol li:not(:first-child):before { content: "/" ; margin: 0 6px ; } h2 { margin: 4px 0 0 ; padding: 0 ; line-height: 1 ; font-size: 20px ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; }

// イベント内容 var action = function(e) { try { // 発生回数を+1 var newCount = Number( document.getElementById( "output" ).textContent ) + 1 ; // 取得した結果を出力 document.getElementById( "output" ).textContent = newCount ; // コンソールで内容を出力 console.log( e ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } // イベントを設定 window.addEventListener( "hashchange", action ) ; // リセット document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).textContent = "0" ; }

外部リンク

HTML Living Standard - WHATWGによる仕様書。

説明

サンプルコード

デモ

関連項目

外部リンク