ど素人から毛を生やす。<延>

ブラウザバックしたらjs(jQuery)のイベントが起こってくれないとき、こうすると解決するかもしれない。

Web > javascript 2014年12月3日(最終更新:2年前)

このページは2014.12.3に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

今回はjQuery弄ってて躓いたのでめもめも。

 

フォームメールcgiに連動したjsを作ったは良いのですが、cgiのフォームは大体が「確認画面」「完了画面」への遷移をします。

入力内容に不備があってエラーになったり、入力した内容を修正したいときはブラウザの「戻る」を使うか、onclick="javascript:history.back()"などブラウザバック機能を搭載したボタンを設置するのが定石です(でないと入力した内容がチャラになりますし)。

で、今回、ブラウザバックしたらフォームに連動したjsが上手く動いてくれませんでした。
具体的には、デフォルトで内容Aを表示・ラジオボタンBをチェックすることで内容Bを表示、とするjsで、Bを選択して確認画面→ブラウザバックしたら、ラジオボタンはBのまま内容Aが表示されていたという感じ。
…文章にするとわかりにくいなぁ(´・ω・`)

ともかく、どういうやり方ならブラウザバックしても動くのか、調査してみました。

NGなパターン

  • トリガーを設置せずに直接書き始める
  • $(window).bind("unload",function(){});
  • $(window).unload(function(){});

何故でしょうか。
一番上はともかく、他はGoogle先生的には太鼓判のやり方のハズなのに動きませんでした。

OKなパターン

  • $(document).ready(function(){});
  • $(window).load(function(){});

むしろこっちのが普通というか、ベタなやり方だと思うのですが、こっちだと動くみたいです。
IE、Chrome、FFで動作確認。

どっちの方が良いの?

両者でブラウザテストしたところ微妙に差異が発生したのでついでにめもめも。

IE、FFではどちらも同じような感じだったのですが、Chromeに限って、
$(window).load(function(){});だと一瞬のズレが発生したのに対し、
$(document).ready(function(){});だと一瞬のズレも発生しませんでした。

$(window).load(function(){});はほぼページ開始時に、$(document).ready(function(){});は読み込み完了時に始まるトリガーなので、一見逆に思えるのですが、headerでスクリプトを読み込むよりABを読み込むほうが遅い故の誤差かもしれません。

画像の量など、ページの重さによって使い分けることをオススメします。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (3)
  • (`・ω・´) 役に立った (4)
  • (・∀・) 参考になった (5)