- 2008-03-14 (金)
- 技術
まず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>
実際には
- alert("1");
- location.reload();では一瞬リロードしそうになるが待機状態になる
- alert("2");
- alert('3');
- ここでようやくリロードが開始される
これにすごい惑わされてしまった・・・
いくら実行しても最後の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を盛込んでみた。
では結果をご覧あれ～。
- alert("1");
- location.reload();ではリロードされる
- alert("2");
- alert("unload");←ここがすごい！なんとalert("2");とは別にもう一つalert("unload");が！
- alert("load");←ここでも下のウィンドウにはalert("2");がいる
- alert('3');
画像を見ても分かるとおりアラートダイアログが2個表示されている。
まさかalertが2個表示された状態になるとは思っても見なかった。というかそんな状態はありえないと思っていた。
さらに言うと画面がリロードされたにもかかわらずalert("3");が表示されるのがすごいところ。
unloadイベントは確かに動いているのでリロード後のJavaScriptは無効になると思っていたが、きっちりリロード後に実行された。
この現象は今後のJavaScriptの勉強の課題にしてみます。
【関連する記事】
- Newer: 起業家2.0―次世代ベンチャー9組の物語はなかなか面白い
- Older: IE Developer Toolbarが誤動作したブラウザ環境
Comments:0
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, JavaScripter Blog
