ページ表示時、読み込み時に JavaScriptを実行する
ページ読み込み時に JavaScriptを実行するコードを紹介します。
概要
ページ読み込み時にJavaScriptを実行するには、大きく分けると以下の2つの方法があります。
- JavaScriptのイベントに設定する方法
- JavaScriptを記述するscriptタグ内に関数化せずにJavaScriptのコードを記述する方法
scriptタグ内に関数化せずにJavaScriptのコードを記述する方法は、ページのDOM構築前に実行されるため、DOM要素が取得できないなどのタイミングの問題があるため、
この記事では、イベントを利用する方法とコードを紹介します。直接記述した場合の動作の詳細はページ末尾の補足のセクションを参照してください。
ページ読み込み時に発生するイベントを設定する方法として、以下の方法があります。
- bodyタグのonloadに記述する方法
- windowオブジェクトのonloadイベント(window.onload)を設定する方法
- window.addEventListener メソッドを利用する方法
この記事では3つの方法それぞれのコードを紹介します。
方法1: bodyタグのonloadに記述する方法
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function proc() {
elem = document.getElementById("output");
elem.innerText = "JavaScriptが実行されました。";
}
</script>
</head>
<body onload="proc();">
<div id="output"></div>
</body>
</html>
解説
bodyタグのonload属性に proc() を記述することで、ページ表示時にproc()関数を呼び出す動作となります。proc() 関数内でメッセージをid="output"のタグ内に表示しています。
方法2: JavaScriptでwindow.onload イベントにイベントハンドラを割り当てる
記述方法 a: 関数をイベントに設定する
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload = onLoad;
function onLoad() {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
関数化されていないため、ページ読み込み時に下記のコードが実行されます。windowオブジェクトのonloadイベントにonLoad関数を設定しています。
window.onload = onLoad;
ページ読み込み後に、onLoad関数が実行されメッセージが画面に表示されます。
function onLoad() {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
記述方法 b: onloadイベントに直接関数を記述する
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload = function onLoad() {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
先のwindow.onload にイベントを設定する方式と動作は同じです。違いは、先のコードでは関数を別途定義し、onloadイベントに設定していますが、このコードでは、onloadイベントに設定する部分でonLoad関数も定義しています。
記述方法 c: 無名関数を利用する方法
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload = function () {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
先のwindow.onload にイベントを設定する方式と動作は同じです。先の例では関数を別途定義し、onloadイベントに設定していますが、このコードでは、onloadイベントに設定する部分で関数を定義しています。関数は無名関数になっており関数名は設定されていません。
方法3: window.addEventListener メソッドを利用する方法
記述方法 a: 関数をaddEventListenerメソッドに与える方法
windows.addEventListener() メソッドを利用してload イベントに関数を登録するとページ読み込み時にJavaScriptを実行できます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.addEventListener("load", execFunction);
function execFunction() {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
window.addEventListener("load", execFunction) の呼び出しでloadイベントにaddEventListenerの第二引数の関数(上記コードではexecFunction()関数)を割り当てます。
ページが読み込まれると、loadイベントに設定した関数(execFunction)が実行されます。
記述方法 b: 無名関数を利用してaddEventListenerを呼び出す方法
先ほどのwindow.addEventListener メソッドを利用するコードと同じ処理ですが、第二引数が関数名ではなく、匿名関数を与えています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.addEventListener("load", function () {
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
window.addEventListener("load", /* 中略 */) の呼び出しでloadイベントにaddEventListenerの第二引数の関数を割り当てます。
上記のコードでは匿名関数が第二引数に与えられているため、ページが読み込まれると、引数に与えた匿名関数のコードが実行されます。
実行結果
上記の4つとも、HTMLファイルを表示すると、下図の画面が表示され、同じ実行結果となります。
補足: Scriptタグ内に関数化せずにJavaScriptのコードを記述した場合の動作について
下記のコードのように、scriptタグ内で関数化せずに、JavaScriptのコードを記述し、
さらにwindowオブジェクトのonloadイベントを用いずに記述した場合、scriptタグ内はページ読み込み時に実行されます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
しかし、javascript実行時には、ページ全体の読み込みが終わってることが保証されていないため、下記のコード部分で id="output"のタグが見つからない可能性があります。
target = document.getElementById("output");
この場合、target=nullとなるため、次行のでnullオブジェクトに対する操作エラーとなります。正しく実行させるためには、先の例のようにwindowオブジェクトのonloadイベントに設定する必要があります。
target.innerHTML = "JavaScriptが実行されました。";
または、下記のコードのように、outputタグより後ろにjavascriptのコードを設置し、javascript実行時には、id="output"のタグが読み込まれている状態にする必要があります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
target = document.getElementById("output");
target.innerHTML = "JavaScriptが実行されました。";
</script>
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
