Событие изменения размера окна кросс-браузера-JavaScript / jQuery

каков правильный (современный) метод для нажатия на событие изменения размера окна, которое работает в Firefox,WebKit, а Internet Explorer?

и можете ли вы включить/выключить обе полосы прокрутки?

237
cross-browser javascript jquery resize

11 ответов

jQuery имеет встроенный метод для этого:

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

для обеспечения быстродействия пользовательского интерфейса вы можете использовать setTimeout для вызова кода только через некоторое количество миллисекунд, как показано в следующем примере, вдохновленном этой:

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

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

    alert('resize');

});
48

вот не-jQuery способ нажатия на событие изменения размера:

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

он работает во всех современных браузерах. Это не дроссель что-нибудь для вас. вот пример его в действии.

39

извините за старый поток, но если кто-то не хочет использовать jQuery, вы можете использовать это:

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

поскольку вы открыты для jQuery, плагин Кажется, сделать трюк.

8

используя 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();
    };
});

Edit:
)* На самом деле не технически идентично, как отмечено и объяснено в комментариях WraithKenny и Генри Блит.

5

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

Я считаю, что плагин jQuery "jQuery resize event" является лучшим решением для этого, поскольку он заботится о дросселировании события, чтобы он работал одинаково во всех браузерах. Это похоже на ответ Эндрюса, но лучше, так как вы можете подключить событие resize к определенным элементам/селекторам, а также ко всему окну. Это открывает новые возможности для написания чистого кода.

плагин доступен здесь

есть проблемы с производительностью, если вы добавляете много слушателей, но для большинства случаев использования она идеальна.

3

Я думаю, вы должны добавить дополнительный контроль этого:

    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

надеюсь, что это поможет в jQuery

сначала определите функцию, если есть существующая функция, перейдите к следующему шагу. 

 function someFun() {
 //use your code
 }

браузер изменить размер использовать, как эти.

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

кроме функции изменения размера окна упоминали, важно понимать, что события resize огонь, если использовать без deboucing событий.

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