web-dev-qa-db-ja.com

クロスブラウザウィンドウのサイズ変更イベント - JavaScript / jQuery

Firefox、 WebKit 、およびInternet Explorerで機能するウィンドウサイズ変更イベントをタップするための正しい（最新の）方法は何ですか？

そして両方のスクロールバーをオン/オフにすることができますか？

javascriptjquerycross-browserresize
238
BuddyJoe

jQueryには 組み込みメソッド があります。

$(window).resize(function () { /* do something */ });

次の例のように、 this にヒントを得て、UIの応答性を高めるために、setTimeoutを使用して数ミリ秒後にコードを呼び出すことを検討してください。

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});
364
Andrew Hedges
$(window).bind('resize', function () { 

    alert('resize');

});
48
fts

これは、resizeイベントを利用するjQuery以外の方法です。

window.addEventListener('resize', function(event){
  // do stuff here
});

最近のすべてのブラウザで動作します。それはあなたのために何もしない何もしません。 これは例です 動作中。

42
Jondlm

古いスレッドを立ち上げて申し訳ありませんが、誰かがjQueryを使いたくない場合は、これを使用できます。

function foo(){....};
window.onresize=foo;
16
javascript is future

あなたはjQueryにオープンであるので、 このプラグイン がトリックをしているようです。

8
Paolo Bergantino

JQuery 1.9.1を使用して、私はちょうど技術的に同じですが*であることを私はちょうどこれがIE10（しかしFirefox）ではうまくいかないことを発見しました：

// did not work in IE10
$(function() {
    $(window).resize(CmsContent.adjustSize);
});

これは両方のブラウザで動作しましたが：

// did work in IE10
$(function() {
    $(window).bind('resize', function() {
        CmsContent.adjustSize();
    };
});

編集：
* WraithKenny および のコメントで説明されているように、実際には技術的に同一ではありません。 （===）ヘンリーブライス 。

5
bassim

jQueryはデフォルトで$(window).resize()関数を提供します。

<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
    $rightPanelData = $( '.rightPanelData' )
    $leftPanelData = $( '.leftPanelData' );

//jQuery window resize call/event
$window.resize(function resizeScreen() {
    // console.log('window is resizing');

    // here I am resizing my div class height
    $rightPanelData.css( 'height', $window.height() - 166 );
    $leftPanelData.css ( 'height', $window.height() - 236 );
});
</script>
4
Aditya P Bhatt

JQueryプラグイン "jQuery resize event"は、イベントを抑制してすべてのブラウザで同じように機能するので、これに最適なソリューションと考えています。これはAndrewsの回答に似ていますが、resizeイベントをウィンドウ全体だけでなく特定の要素/セレクタにもフックできるのでより優れています。クリーンなコードを書くための新しい可能性が開かれます。

プラグインは入手可能です ここ

リスナーを多数追加するとパフォーマンスの問題が発生しますが、ほとんどの場合、これは完璧です。

3
oldwizard

前述のウィンドウのリサイズ関数の他に、イベントをデビューせずに使用された場合、リサイズイベントが頻繁に発生することを理解することが重要です。

Paul Irishには、サイズ変更をデバウンスする優れた機能があります。非常にお勧めです。クロスブラウザで動作します。先日IE8でそれをテストしました、そしてすべては大丈夫でした。

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

違いを確認するには、 デモをチェックする を必ず実行してください。

これが完全性のための関数です。

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});
0
lowtechsun

私はあなたがこれにさらに制御を加えるべきだと思います：

    var disableRes = false;
    var refreshWindow = function() {
        disableRes = false;
        location.reload();
    }
    var resizeTimer;
    if (disableRes == false) {
        jQuery(window).resize(function() {
            disableRes = true;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(refreshWindow, 1000);
        });
    }
0
Francesco Frapporti

jQueryに役立つことを願っています

既存の関数がある場合は、最初に関数を定義します。次の手順に進みます。

 function someFun() {
 //use your code
 }

ブラウザのリサイズはこんな感じ。

 $(window).on('resize', function () {
    someFun();  //call your function.
 });
0
Venu immadi