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

Ответ 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);
});

Ответ 2

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

    alert('resize');

});

Ответ 3

Вот не-jQuery способ прослушивания события изменения размера:

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 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();
    };
});

Edit:
) * Фактически не технически идентичен, как указано и пояснено в комментариях WraithKenny и Генри Блит.

Ответ 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> 

Ответ 8

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

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

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

Ответ 9

Думаю, вам следует добавить дополнительный контроль:

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

Ответ 10

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

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

 function someFun() {
 //use your code
 }

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

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

Ответ 11

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

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