240

Firefox、 WebKit、および Internet Explorerで機能するウィンドウのサイズ変更イベントを利用するための正しい (最新の) 方法は何ですか?

また、両方のスクロールバーをオン/オフできますか?

4

11 に答える 11

369

jQuery には、このための組み込みメソッドがあります。

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

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

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

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});
于 2010-06-03T19:24:22.483 に答える
48 
$(window).bind('resize', function () { 

    alert('resize');

});
于 2009-07-28T14:34:11.420 に答える
17

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

function foo(){....};
window.onresize=foo;
于 2012-06-17T15:07:35.080 に答える
8

あなたは jQuery にオープンなので、このプラグインはそのトリックを行うようです。

于 2009-03-01T05:15:01.753 に答える
4

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>
于 2013-09-02T08:22:40.910 に答える
3

jQueryプラグイン「jQueryresizeevent」は、すべてのブラウザーで同じように機能するようにイベントのスロットリングを処理するため、これに最適なソリューションであると考えています。Andrewsの回答に似ていますが、サイズ変更イベントを特定の要素/セレクターおよびウィンドウ全体にフックできるため、より優れています。クリーンなコードを書くための新しい可能性を開きます。

プラグインはこちらから入手できます

多くのリスナーを追加するとパフォーマンスの問題が発生しますが、ほとんどの使用例では完璧です。

于 2011-03-07T16:00:30.367 に答える
0

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

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

 function someFun() {
 //use your code
 }

ブラウザのサイズ変更は次のように使用します。

 $(window).on('resize', function () {
    someFun();  //call your function.
 });
于 2013-11-13T09:41:54.157 に答える
0

これにさらに制御を追加する必要があると思います：

    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);
        });
    }
于 2013-03-29T19:19:45.297 に答える
0

前述のウィンドウ サイズ変更機能の他に、イベントをデバウンスせずに使用すると、サイズ変更イベントが頻繁に発生することを理解することが重要です。

ポール・アイリッシュには、サイズ変更呼び出しを大幅にデバウンスする優れた機能があります。使用することを強くお勧めします。クロスブラウザで動作します。先日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...
});
于 2016-04-18T13:15:00.583 に答える