Web ページの読み込み後に JavaScript コードを実行する
-
JavaScript の
bodyタグの最後にscriptタグを追加する -
JavaScript で
onloadイベントを使用する -
JavaScript の
bodyタグでonloadイベントを使用する -
JavaScript ファイル内の
windowオブジェクトでonloadイベントを使用する
JavaScript コードを実行する前に、すべての HTML 要素が最初にブラウザーでレンダリングされることを常に確認する必要があります。JavaScript コード内でこれらの HTML 要素を参照するため、これらの要素は Web ページの前にロードする必要があります。
HTML ドキュメントは上から下に実行され、head タグは body タグの前に存在します。したがって、最初に実行され、次に body タグが実行されます。
すべての Web ページコンテンツは body タグ内にあり、body タグは head タグの後にあるため、head 内に JavaScript コードを追加する必要はありません。これは、見つけることができないためです。HTML 要素。この時点まで、要素はまだ作成されていないことに注意してください。
すべての Web ページのコンテンツが画面に完全にレンダリングされた後に JavaScript をロードするには、さまざまな方法があります。以下は、Web ページが完全にロードされた後に JavaScript コードを実行するために従うことができるいくつかのよく知られた方法です。
JavaScript の body タグの最後に script タグを追加する
body タグの最後に script タグを追加することは、JavaScript コードをロードする一般的な方法です。これまで、Web ページのすべてのコンテンツが画面に適切にレンダリングされていました。そのため、プロセスでエラーが発生することなく、JavaScript コード内でこれらの HTML 要素を簡単に検索または参照できます。
以下のプログラムは、それがどのように行われるかを示しています。
<body>
<script></script>
</body>
JavaScript で onload イベントを使用する
ページがロードされた後に JavaScript を実行する別の方法は、onload メソッドを使用することです。onload メソッドは、ページが読み込まれるまで待機します。実行するとすぐに、このプロセスは JavaScript コードを実行します。
JavaScript コードを書くには 2つの方法があります。1つの方法は、body タグの下の script タグ内に JavaScript コードを記述してから、onload メソッド内で関数を呼び出すことです。JavaScript コードを記述するための別のファイルを作成し、そのファイルを HTML 内の body タグの最後にリンクしてから、onload メソッド内でその関数を呼び出すこともできます。
JavaScript の body タグで onload イベントを使用する
onload メソッドには target 変数が必要です。この場合、body タグで onload メソッドを使用して、それがターゲットになるようにします。
onload メソッド内で、関数を渡すだけです。現在、この関数は、Web ページのすべてのコンテンツが完全にロードされた後にのみ実行されます。
<body onload="myFunction()">
<h1>This is an example of onload.</h1>
<script>
function myFunction() {
console.log("function called...");
}
</script>
</body>
出力：
function called...
body タグには、h1 タグと script タグがあります。script タグには、function called... コンソールウィンドウにメッセージを出力する myFunction() 関数があります。ページがロードされた後にこの関数を実行するには、onload メソッド内に渡す必要があります。
JavaScript ファイル内の window オブジェクトで onload イベントを使用する
onload メソッドを使用する別の方法は、window オブジェクトを使用することです。ウィンドウオブジェクトは、ブラウザウィンドウ全体を表します。ブラウザのウィンドウ内の要素が完全に実行されたら、onload メソッドを使用して JavaScript コードを実行できます。
<body>
<h1>This is an example of onload.</h1>
<script>
window.onload = function () {
console.log("function called...");
}
</script>
</body>
ここでは、前のコードと同じコードがあります。ここでの唯一の違いは、現在ターゲットとなっている window オブジェクトで onload メソッドを使用していることです。プログラムは最終的に関数を呼び出し、function called... というメッセージがコンソールウィンドウに出力されます。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn