JavaScript / CoffeeScript

例えばページロード時にSafari(7.1)だとpopStateイベントが発生して、Chrome(40.0.2214.91)やFirefox(35.0.1)だと発生しなかったりします。

ページ遷移イベントの動作を確認する

今回のコードではJavaScriptコンソールと画面にload, pageShow, popStateの各イベントの発生を通知します。

pushStateやreplaceStateもボタンから実行できるので色々試してみてください。

自己リンクとページ内リンクも用意しておきます。

ページ遷移イベント動作確認コードのCoffeeScript

ちなみにイベントハンドラの設定コードはこんな感じです。

$ ->
  outputSelector = '.event-output'

  notify = (text) ->
    message = "[#{new Date().toLocaleString()}] #{text}"
    $(outputSelector).append("#{message}\n")
    console.log(message)

  $(window).on 'load', (event) ->
    notify(
      "loadイベントが発生しました。\n" +
      "  location.href = #{location.href}"
    )

  $(window).on 'pageshow', (event) ->
    notify(
      "pageshowイベントが発生しました。\n" +
      "  location.href = #{location.href}"
    )

  $(window).on 'popstate', (event) ->
    notify(
      "popstateイベントが発生しました。\n" +
      "  location.href = #{location.href}\n" +
      "  event.originalEvent.state = #{event.originalEvent.state}"
    )

  $(document).on 'click', '.push-state-button', ->
    state = "push:#{new Date().toLocaleString()}"
    notify("history.pushState('#{state}', null, '#push')")
    history.pushState("#{state}", null, '#push')

  $(document).on 'click', '.replace-state-button', ->
    state = "replace:#{new Date().toLocaleString()}"
    notify("history.replaceState('#{state}', null, '#replace')")
    history.replaceState("#{state}", null, '#replace')

  notify('load, pageShow, popStateイベントハンドラをbindしました。')

まとめ

以上、JavaScriptのページ遷移イベント確認コードの紹介でした。

こういうことは調べるより実際に動かしてみた方が早かったりするので、よろしければご利用ください。