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

JavaScriptでブラウザウィンドウのリサイズを検知するには？resizeイベントの使い方を解説

ブラウザのウィンドウサイズが変更されたときに処理を実行したい場合は、JavaScriptのresizeイベントを使用します。ユーザーがブラウザウィンドウのサイズを変更するたびにこのイベントが発生し、window.outerWidthやwindow.outerHeightといったプロパティと組み合わせることで、リサイズ後のウィンドウの幅と高さを簡単に取得できます。

resizeイベントとウィンドウサイズ取得の基本

window.outerWidthはブラウザウィンドウ全体（外枠を含む）の幅を、window.outerHeightは同じく高さをピクセル単位で返します。なお、これらはあくまで「プロパティ」であり、イベントそのものではない点に注意してください。実際にリサイズを検知する役割を担うのは、HTML要素のonresize属性、またはaddEventListener("resize", ...)によるイベント登録です。

実装例：onresize属性を使う方法

以下のコードでは、body要素にonresize属性を指定し、ウィンドウがリサイズされるたびに現在の幅と高さをページ上に表示します。ブラウザウィンドウのサイズを変更してみて、表示がリアルタイムに更新されることを確認してください。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function resizeFunction() {
            var val = "Window Width=" + window.outerWidth + ", Window Height="
            + window.outerHeight;
            document.getElementById("test").innerHTML = val;
         }
      </script>
   </head>
   <body onresize = "resizeFunction()">
      <p>ブラウザウィンドウのサイズを変更すると、そのたびに
      ウィンドウの幅と高さが再取得され、下に表示されます。</p>
      <p id = "test"> </p>
   </body>
</html>

addEventListenerを使ったより柔軟な書き方

HTMLのonresize属性を使わずに、JavaScript側でイベントリスナーを登録する方法もあります。HTMLとロジックを分離できるため、規模の大きいアプリケーションではこちらの方が保守性の高い実装とされています。

window.addEventListener("resize", function() {
  console.log("Width: " + window.outerWidth + ", Height: " + window.outerHeight);
});

また、resizeイベントはドラッグ操作中などに短時間で何度も連続して発生する特性があります。パフォーマンスへの影響が気になる場合は、「デバウンス」や「スロットリング」といった手法でイベント発火時の処理回数を制限するとよいでしょう。

  1. JavaScriptで新しいブラウザウィンドウを開く最良の方法とは？window.open()の使い方を解説

    JavaScriptで新しいブラウザウィンドウを開くには、windowオブジェクトのopen()メソッドを使うのが最も標準的で確実な方法です。 window.open()メソッドは、指定したURLを新しいウィンドウ（またはタブ）で開きます。第2引数でウィンドウ名、第3引数でサイズや位置などの表示特性を指定することも可能です。 window.open()の基本構文 window.open(URL, name, features); URL： 開きたいページのアドレス（必須） name： ウィンドウの名前またはターゲット属性（例： _blank）（省略可） features： ウィンドウの幅・高

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

    Webブラウザのウィンドウサイズが変更されたときに処理を実行したい場合は、onresize属性を使用します。この属性は、ユーザーがブラウザウィンドウの大きさを変更した瞬間に自動的にトリガーされ、指定したJavaScript関数を呼び出すことができます。onresize属性の基本的な使い方body要素にonresize属性を設定し、実行したい関数名を指定します。以下はその基本構文です。<body onresize = 関数名()>実装例実際にブラウザウィンドウのリサイズを検知してアラートを表示するサンプルコードです。以下のコードを保存してブラウザで開き、ウィンドウのサイズを変更してみ