jQuery 「イベント」ブラウザウィンドウのリサイズを検出する

ブラウザウィンドウのサイズを変更すると発生するイベントで、対象はWindow要素だけです。このメソッドは、ブラウザによって動作が異なる場合があります。InternetExplorerやSafari、Google Chrome等では、リサイジョンによって完全にリサイズが完了したときに1度だけイベントが発生する場合があります。trigger(‘resize’)、引数無しのresize()では、リサイズのイベントをスクリプトから発生させます。

書式

$(対象要素).on('resize', イベントハンドラ)
$(対象要素).trigger('resize')
$(対象要素).resize()

$('window').resize(function(e){
   alert('resize');
});
$('window').trigger('resize');
$('window').resize();

サンプル

ウィンドウのリサイズを検出する、ボタンを押したらリサイズイベントを発生させる

<body>
  <div class="main">
    <div class="header">
      <h1>サンプル</h1>
    </div>
    <div class="content">
      <div class="desc"></div>
      <button class="button" type="button">リサイズ</button>
    </div>
    <div class="footer">
      <hr>
      <p class="copyright">2019 xxxx all rights reserved.</p>
    </div>
  </div>
  <script>
  $(document).ready(function(){
    $(window).on('resize', function(e) {
      $('.desc').html('リサイズされました<br>ウィンドウ幅は'
        +$(window).width()
        +'<br>ウィンドウの高さは'
        +$(window).height());
    });
    $('.button').on('click',function(e){
      $(window).trigger('resize')
    });
  });
  </script>
  </body>

カテゴリー:JavaScriptjQueryイベント