JavaScriptでウィンドウをロードした際に何かを実行するには、window.onloadイベントを使用します。
以下は、ウィンドウがロードされた後にアラートを表示するサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Load Example</title>
</head>
<body>
<h1>ウィンドウロードイベントの例</h1>
<p>ウィンドウがロードされた後にアラートが表示されます。</p>
<script>
window.onload = function() {
alert("ウィンドウがロードされました！");
};
</script>
</body>
</html>
このコードのポイントは以下の通りです：
- window.onload: ウィンドウ全体がロードされたときに実行されるイベントリスナーを設定します。
- アラート表示: window.onloadの中でalert関数を使ってアラートを表示します。
このコードをHTMLファイルに保存し、ブラウザで開くと、ページが完全にロードされた後に「ウィンドウがロードされました！」というアラートが表示されます。
もちろん、アラートの代わりに他の任意の処理を行うこともできます。例えば、DOM操作やデータのフェッチなどです。
別の方法として、JavaScriptのDOMContentLoadedイベントを使うこともできます。
このイベントは、DOMが完全に構築された後に発生しますが、画像やスタイルシートの読み込みを待つ必要はありません。以下はその例です：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOMContentLoaded Example</title>
</head>
<body>
<h1>DOMContentLoadedイベントの例</h1>
<p>DOMが完全に構築された後にアラートが表示されます。</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
alert("DOMが完全に構築されました！");
});
</script>
</body>
</html>上記の例では、DOMContentLoadedイベントが発生したときにアラートを表示します。
window.onloadとは異なり、画像やスタイルシートが完全に読み込まれる前に実行されるため、ページの表示速度を向上させたい場合に便利です。