JavaScript Window の Onload 関数呼び出し

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript Window の Onload 関数呼び出し
Muhammad Muzammil Hussain 2023年1月30日
JavaScript JavaScript Window Onload Method
  1. window.onload HTML での例による機能の使用
  2. 与えられた HTML コードを数ステップで調べます
  3. 同じ結果を確認する別の方法
JavaScript Window の Onload 関数呼び出し

この記事では、JavaScript の window.onload メソッドの目的を例を挙げて説明します。window.onload 関数は、ブラウザーのページのロードが完了すると、タスクを実行するために実行されます。

window.onload HTML での例による機能の使用

window.onload メソッドは、ページがブラウザに完全に読み込まれたときにトリガーされます（すべての画像、スタイル、スクリプト、および CDN も同様です）。ここでは、自動実行に window.onload メソッドを使用してアラートボックスを表示する HTML ページのソースコードの例を見ることができます。

<html>
<head>
<title>(Window.onload function in HTML)</title>
<script type="text/javascript">

function code(){
alert(" Alert inside code function Window.onload");
}

window.onload=code();
</script>

</head>
<body>

<h1> Graphic Designer Firm </h1>
    <p1> A craft of creating visual content to communicate messages.</p1>
</br> <img src = "Graphic-Design.png" height="500px" width="500px" >

</br> <hr width="800">
</body>
</html>

上記の HTML ページのソースでは、doctypehtml で JavaScript を使用する <script type="text/javascript"> タグを確認できます。次のステップでは、function code() が <script> タグ内で宣言されます。

function code() は window.onload と呼ばれます。Web ページに画像とテキストコンテンツが完全に読み込まれると、デフォルトのアラートダイアログが表示されます。

与えられた HTML コードを数ステップで調べます

これらの 4つの簡単な手順に従って、window.onload メソッドを明確に理解してください。

  • テキストドキュメントを作成します。メモ帳やその他のテキスト編集ツールを利用できます。
  • 指定されたコードを作成されたテキストファイルに貼り付けます。
  • 拡張子 .html でそのテキストファイルを保存し、デフォルトのブラウザで開きます。
  • ページが完全に読み込まれた直後にポップアップするアラートボックスが表示されます。

同じ結果を確認する別の方法

body タグを介して代替の onload イベントを使用することにより、アラートメッセージの結果を得ることができます。自動実行を使用してアラートボックスを含む関数コードを呼び出す body タグの例を次に示します。

<script type="text/javascript">

function code(){
alert(" Alert inside code function");
}
</script>

<body onLoad="code()";>

どちらの例でも、body タグの onLoad と window.onload には、ページの読み込みが完了した後にステートメントを実行するための同じ機能があります。