web-dev-qa-db-ja.com

ウィンドウのサイズが変更されたときに関数を呼び出す

ブラウザウィンドウのサイズが変更されるたびに、この（または任意の）JS関数を再度実行するにはどうすればよいですか？

<script type="text/javascript">
 function setEqualHeight(e) {
     var t = 0;
     e.each(function () {
         currentHeight = $(this).height();
         if (currentHeight > t) {
             t = currentHeight
         }
     });
     e.height(t)
 }
 $(document).ready(function () {
     setEqualHeight($(".border"))
 })
</script>
javascriptjquerywindow-resize
22
Rich

Window onresizeイベントを使用できます：

window.onresize = setEqualHeight;
27
udidu

window.onresizeイベントにサブスクライブできます（ こちらを参照 ）

window.onresize = setEqualHeight;

または

window.addEventListener('resize', setEqualHeight);
17
dougajmcdonald

Jqueryを使用するため、 .resize() メソッドを使用してバインドします。

$(window).resize(function () {
    setEqualHeight( $('#border') );
});
12
Gabriele Petrioli

このコードは、ウィンドウのサイズが変更されてから200ミリ秒後にサイズ変更関数を呼び出すタイマーを追加します。これにより、メソッドの呼び出しが削減されます。

var globalResizeTimer = null;

$(window).resize(function() {
    if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
    globalResizeTimer = window.setTimeout(function() {
        setEqualHeight();
    }, 200);
});
11
Merec