読者です 読者をやめる 読者になる 読者になる

7cc@はてなブログ

JavaScriptとかとか

hashの追加について location.hash history.pushState

popstateも起きるので追加しないと・・・

location.hashでハッシュを付与したとき

onhashchange, onscroll片方のみ起きる、両方起きる、両方起きないの4パターン

  1. 現在のハッシュと代入するハッシュが
    • 異なる … ハッシュが変わり(onhashchange)、履歴が追加される。CSS-target疑似クラスがあればそれが有効になる。2へ
    • 同じ … 2へ
  2. ハッシュと同じIDの要素が
    • ある or 代入するハッシュが#のみ, #top
      • 現在の位置とその要素の位置が
        • 異なる … 移動する (onscroll)
        • 同じ … 終わり
    • ない … 終わり

history.pushStateでハッシュを追加したとき

  • スクロールイベントは起こらない
  • target疑似クラスが有効にならない
  • 追加時にはonhashchangeが起きない
  • ただし、pushStateした後の戻る/進むではonhashchangeが起きる
  • 同じハッシュでも履歴が追加される

pushStateでは同じハッシュの履歴が連続しないように注意。


hashを付与する方法

location.hash = "#a"
location.href = "#a"
location.assign("#a")
location.replace("#a") // 戻れない

history.pushState(null, null, "#a")
history.replaceState(null, null, "#a")