Webページ読み込み時の処理(onLoad)

広告

ブラウザがホームページの読み込み完了時に何らかの処理を行いたい場合、<body>タグの中でonLoadを使って記述します。 

<body onLoad="処理">

処理の部分には直接実行する命令を記述するか呼び出す関数を記述します。 

function test(){
  ....
}

....

<body onLoad="test()">

また現在のページから他のページへ移ろうとした際に何らかの処理を行いたい場合は<body>タグの中でonUnloadを使って記述します。 

<body onUnload="処理">
サンプルコード

では実際に試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="./js/script1_1.js">
</script>

<title>JavaScript テスト</title>
</head>
<body onLoad="loadHello()" onUnload="unloadBye()">

<p>
<a href="http://www.google.co.jp/">Googleへ移動します</a>
</p>

</body>
</html>

function loadHello(){
  alert("Hello!");
}

function unloadBye(){
  alert("Bye!");
}

上記をブラウザで見ると下記のように表示されます。

p1-1

ブラウザがHTMLファイルの読み込み完了時にダイアログを表示します。ダイアログの「OK」ボタンを押して閉じて下さい。

p1-2

ページに表示されているリンクをクリックすると別のページに移動します。この時、移動する前にダイアログが表示されます。

p1-3

ダイアログの「OK」ボタンをクリックするとダイアログが閉じ、その後でリンク先のページへ移動します。

p1-4

このように「onLoad」及び「onUnload」を使用することでWebページの読み込み時と離脱時に処理を行わせることができます。

( Written by Tatsuo Ikura )