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

Question

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

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

Answer 1

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);
});

Answer 2

$(window).bind('resize', function () { 

    alert('resize');

});

Answer 3

Вот не-jQuery способ подключения к событию изменения размера:

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

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

Answer 4

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

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

Answer 5

Так как вы открыты для jQuery, этот плагин, кажется, делает свое дело.

Answer 6

Используя 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 и Henry Blyth.

Answer 7

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> 

Answer 8

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

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

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

Answer 9

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

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

 function someFun() {
 //use your code
 }

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

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

Answer 10

Помимо упомянутых функций изменения размера окна, важно понимать, что события изменения размера запускаются очень часто, если используются без удаления событий.

У Пола Айриша есть отличная функция, которая значительно снижает вызовы изменения размера. Очень рекомендуется использовать. Работает кросс-браузер. Протестировал его в 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...
});

Answer 11

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

    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);
        });
    }