Подія крос-браузера зміни розміру вікна - JavaScript / jQuery

Який правильний (сучасний) метод введення події у розмір вікна, який працює в Firefox, WebKit та Internet Explorer?

І чи можна вмикати / вимикати обидві смуги прокрутки?

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

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

    alert('resize');

});

Ось не-jQuery спосіб входження в подію зміни розміру:

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

Він працює у всіх сучасних браузерах. Це нічого не придушує для вас. Ось приклад цього в дії.

Вибачте, що знайшли стару тему, але якщо хтось не хоче використовувати jQuery, ви можете скористатися цим:

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

Оскільки ви відкриті для jQuery, цей плагін, здається, робить свою справу.

Використовуючи 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 та Генрі Блайт .

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> 

Я вважаю плагін jQuery "jQuery resize resize" найкращим рішенням для цього, оскільки він піклується про заглушку події, щоб вона працювала однаково у всіх браузерах. Це схоже на відповідь Ендрюса, але краще, оскільки ви можете підключити подію зміни розміру до конкретних елементів / селекторів, а також у всьому вікні. Це відкриває нові можливості писати чистий код.

Плагін доступний тут

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

Я думаю, ви повинні додати додатковий контроль до цього:

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

сподіваємось, що це допоможе в jQuery

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

 function someFun() {
 //use your code
 }

використання розміру браузера як такий.

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

Окрім згаданих функцій зміни розміру вікон, важливо розуміти, що події зміни розміру спрацьовують дуже багато, якщо вони використовуються без деблокування подій.

Пол Ірландський має чудову функцію, яка значно знімає розміри дзвінків. Дуже рекомендується використовувати. Працює крос-браузер. Днями випробував його в 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...
});