Home > 技術 > location.reloadはhref属性で使うと処理が完了するまで待ちになる

location.reloadはhref属性で使うと処理が完了するまで待ちになる

まずlocation.reloadとは

locationオブジェクトのreloadメソッドは、現在表示されているページのリロード(再読み込み)を行います。

Internet Explorer等の一般的なブラウザの[更新]ボタンを押したときと同じ動作です。

via: location.reload()-JavaScriptリファレンス

となっているので、呼び出されたタイミングで画面がリロードされるのが普通だろう。

だがアンカータグのhrefにlocation.reloadがある場合、
すべての処理が終わるまでリロードは待ちの状態になる。

以下のスクリプトを見てみると。
funcという関数でlocation.reloadを呼び出しているが、

<script type="text/javascript">
<!--
 var func = function(){
  alert("1");
  location.reload();
  alert("2");
 }
//-->
</script>
<a href="javascript:func();alert('3');">リロード</a>

実際には

  1. alert("1");
  2. location.reload();では一瞬リロードしそうになるが待機状態になる
  3. alert("2");
  4. alert('3');
  5. ここでようやくリロードが開始される

これにすごい惑わされてしまった・・・
いくら実行しても最後のalertが実行された後にリロードしてしまうからだ。


さらにもっと分かりにくい現象をご紹介しよう。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--
	var func = function(){
		alert("1");
		location.reload();
		alert("2");
	}
//-->
</script>
<body onload="alert('load');" onunload="alert('unload');">
<a href="#" onclick="Event.stop(event);func();alert('3');">リロード</a>
</body>

今回はhref属性にはJavaScriptを実装せず、onclickイベントに実装してみた。
これでlocation.reloadの待機状態はなくなる。

んでもっていつ画面がリロードされるかを確認したいのでonloadとonunloadにalertを盛込んでみた。

では結果をご覧あれ~。

  1. alert("1");
  2. location.reload();ではリロードされる
  3. alert("2");
  4. alert("unload");←ここがすごい!なんとalert("2");とは別にもう一つalert("unload");が!
  5. alert("load");←ここでも下のウィンドウにはalert("2");がいる
  6. alert('3');

画像を見ても分かるとおりアラートダイアログが2個表示されている。

まさかalertが2個表示された状態になるとは思っても見なかった。というかそんな状態はありえないと思っていた。
さらに言うと画面がリロードされたにもかかわらずalert("3");が表示されるのがすごいところ。
unloadイベントは確かに動いているのでリロード後のJavaScriptは無効になると思っていたが、きっちりリロード後に実行された。

この現象は今後のJavaScriptの勉強の課題にしてみます。

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/937
Listed below are links to weblogs that reference
location.reloadはhref属性で使うと処理が完了するまで待ちになる from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > location.reloadはhref属性で使うと処理が完了するまで待ちになる

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top