onLoad,onUnｌoadイベント
今回は、JavaScriptでページの読み込み完了時、他のページへの移動時に発生するonLoadイベント
onUnloadイベントの利用方法についてふれてみます。
onLoadイベントはページの読み込みが完了した時に発生するイベントです。<BODY>タグ、または
<FRAME>タグに記述することができます。
onUnloadは現在のページから他のページに移動しようとした時に発生します。<BODY>タグに記述
することができます。
onLoadイベントは、ページの読み込みが完了した時点で関数を呼びたいというケースで使います。
例えば、ページの読み込みの時間を計測して、回線速度の計測をしたい、という時に使うことが
できます。実例をあげて説明しましょう。下の例は、大きな画像のあるページを読み込ませ、読み込み
にかかった時間から回線速度を計算するものです。
簡単に解説します。
①でまず、読み込み開始時の時刻を変数starttimeに代入します。
②このページのファイルサイズです。単位はByteです。
③回線速度を計算する関数calc_timeです。onLoadイベントで呼び出されます。
ページ読み込み完了時の時刻を変数endtimeに代入し、starttimeとの差から読み込み時間を計算し
1秒当たりに読み込んだファイルサイズを計算しています。
④<BODY>にonLoadイベントを記述し、ページ読み込み完了時に、関数calc_timeを呼び出します。
実例のサンプルページは、回線速度測定になります。
＊実例のサンプルページは、広告を読み込んだり、カウンタを表示したり若干余計なことをしているので、
実際の回線速度より少し遅めの結果になりますが、他の回線速度測定のページと比較してみても、
誤差の範囲は5%～10%程度です。
| <html> <HEAD> <script language="Javascript"> <!-- mydate = new Date(); starttime = mydate.getTime(); /*①開始時間*/ pagesize = 1710000; /*②ファイルサイズ*/ function calc_time() /*③回線速度測定の関数*/ { mydate = new Date(); endtime = mydate.getTime(); difference = (endtime - starttime)/1000; document.myFORM1.mytime.value = difference + " 秒"; document.myFORM1.myspeed.value = Math.floor(((pagesize / difference)/1024)*10)+" KBPS"; } // --> </script> </head> <body onload="calc_time()"> /*④onLoadイベント*/ <FORM NAME="myFORM1"> 読み込み時間 <INPUT TYPE="TEXT" NAME="mytime"><br> 回線速度<INPUT TYPE="TEXT" NAME="myspeed"><br></font> </FORM> <br> <img src="speedtest.bmp"><br> <img src="speedtest2.bmp"><br> <img src="speedtest3.bmp"><br> </body> </html> |
こんな感じでonLoadイベントの利用で簡単な回線速度測定のページを作れてしまいます。
他に、ページの読み込みが完了してから呼び出したいJavaScriptがある場合に、onLoadイベント
を利用します。
onUnload
onUnloadは現在のページから移行しようとしたときに発生するイベントです。このonUnloadイベント
を利用すると、以下のようないたずらページを作ったりすることができます。
ページを移行する時に、同じページをオープンして決して閉じることができないいたずらページを
つくることができます。（よく、アダルトサイトで、閉じても閉じても同じページが表示されたりしますが、
その仕掛けもこんなものです）
ブラウザを「戻る」ボタンをクリックしたり、×ボタンで閉じようとすると、その時に発生するonUnload
イベントで同じページをオープンする関数を呼び出します。記述するのは、たったの数行です。
実例のサンプルページ：分身の術
| <body bgcolor="#FFFFFF" onunload="newp()"> <script language="JavaScript"> <!-- function newp() { window.open("noend.html","","outerWidth=150,outerHeight=140,top=0,left=0"); } |