HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでブラウザウィンドウのサイズ変更時にスクリプトを実行する方法

Webブラウザのウィンドウサイズが変更されたときに処理を実行したい場合は、onresize属性を使用します。この属性は、ユーザーがブラウザウィンドウの大きさを変更した瞬間に自動的にトリガーされ、指定したJavaScript関数を呼び出すことができます。

onresize属性の基本的な使い方

body要素にonresize属性を設定し、実行したい関数名を指定します。以下はその基本構文です。

<body onresize = "関数名()">

実装例

実際にブラウザウィンドウのリサイズを検知してアラートを表示するサンプルコードです。以下のコードを保存してブラウザで開き、ウィンドウのサイズを変更してみてください。

<!DOCTYPE html>
<html>
   <body onresize = "display()">
      <p>ウィンドウのサイズを変更するとイベントが発生します。</p>
      <script>
          function display() {
             alert("ブラウザウィンドウのサイズが変更されました！");
          }
      </script>
   </body>
</html>

動作の解説

このコードでは、bodyタグにonresize = "display()"を指定しています。ユーザーがウィンドウの端をドラッグしてサイズを変更すると、display()関数が呼び出され、「ブラウザウィンドウのサイズが変更されました！」というアラートが表示されます。

補足：addEventListenerを使った方法

HTML属性の代わりに、JavaScript側でイベントリスナーを登録する方法もあります。こちらの方がHTMLとJavaScriptを分離できるため、保守性の高いコードになります。

window.addEventListener('resize', function() {
   console.log('ウィンドウがリサイズされました');
});

なお、リサイズイベントはドラッグ中に連続して何度も発生するため、実際の開発ではsetTimeoutなどを使って処理を間引く「デバウンス（throttle）」テクニックを組み合わせると、パフォーマンスの向上が期待できます。

  1. HTMLでブラウザがメディアデータを取得中のときにスクリプトを実行するには？

    HTMLでは、onprogress属性を使用することで、ブラウザがメディアデータ（動画や音声）をダウンロードしている最中にスクリプトを実行できます。onprogress属性とはonprogress属性は、ブラウザがメディアデータを取得（バッファリング）している間に発生するイベントです。読み込みの進捗状況をユーザーへ通知したり、ローディング表示を制御したりする際に活用できます。実装例以下のコードを実行して、onprogress属性の動作を確認してみましょう。<!DOCTYPE html> <html>    <body>   &n

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実