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


240

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

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


Я тоже смотрю на это. Я хотел бы попытаться применить предлагаемые здесь решения, но боюсь, что не понимаю синтаксис: $ (окно). Это что-то особенное для jquery?
Byff

1
Да, $ (window) - это конструкция jQuery. window.onresize является эквивалентом в сыром JavaScript.
Эндрю Хеджес

Это демо может помочь никому тест на всех браузерах jsfiddle.net/subodhghulaxe/bHQV5/2
Subodh Ghulaxe

window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/…
Дилан Валаде

В Opera на мобильном телефоне она срабатывает каждый раз, когда отображается / скрывается верхняя панель (пользовательский интерфейс браузера).
псур

Ответы:


367

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

34
Почему это событие не вызывается, когда окно расширяется до полного экрана с помощью кнопки?
Хитрый

2
@Sly Для меня это работает, в Safari, Chrome и Mozilla на Mac. Какой браузер вы используете?
Марк Витал

2
@Sly:$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })
Зак Заткин-Голд

6
Элайджа, это JavaScript. То, что вы написали, не правильно (за исключением одного конкретного случая, когда вы строите с новым).
Йо Судзуки

3
Стоит отметить, что эта функция jQuery «добавляет» вызов функции в текущий список функций, которые должны вызываться при изменении размера окна. Он не перезаписывает существующие события, которые в настоящее время запланированы на изменение размера окна.
RTF

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

    alert('resize');

});

4
Я предпочитаю подход связывания, так как метод resize () на самом деле является ярлыком для подхода полного связывания, и я часто нахожу, что обычно есть несколько обработчиков событий, которые я должен применять к элементу.
Майк Корменди

@Mike - Не только это, но я предполагаю, что метод resize не имеет метода "unbind" в случае, если вы хотите удалить слушателя. "связать", безусловно, путь!
Шейн

43

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

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

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


это решение не будет работать в IE. Исправлена ​​версия с поддержкой IE dom: stackoverflow.com/questions/6927637/…
Сергей

1
> Это ничего не душит для вас. Не могли бы вы уточнить? Что должно / будет ли это душить? Относится ли это к событию, стреляющему много раз подряд?
josinalvo

@josinalvo обычно , когда вы слушаете событие , которое выстреливает много вы хотите дребезг (например lodash) это так , вы не причина узкого места в вашей программе.
Jondlm

17

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

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

8
Просто имейте в виду, что это приведет к затиранию любых существующих обработчиков, которые могут быть связаны с window.onresize. Если ваш сценарий должен жить в экосистеме с другими сценариями, вы не должны предполагать, что ваш сценарий является единственным, который хочет что-то сделать при изменении размера окна. Если вы не можете использовать фреймворк, такой как jQuery, вам следует, по крайней мере, рассмотреть возможность захвата существующего window.onresize и добавления вашего обработчика в его конец, вместо того, чтобы полностью забивать его.
Том Оджер

2
@TomAuger «Вы должны хотя бы рассмотреть возможность захвата существующего window.onresize и добавления вашего обработчика в конец его» - вы, вероятно, имели в виду обратное, т.е. «вызвать существующий обработчик в конце вашего обработчика»? Мне бы очень хотелось увидеть код JavaScript, который бы добавил что-то в конец уже существующей функции :-)
TMS

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


5

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


1
Есть две перемены. Какой из них имел эффект? ( .resize()К .bind('resize')? Или добавить анонимную функцию , я имею в виду , что это второе.)
WraithKenny

@WraithKenny Хороший вопрос. Вполне возможно, что добавление анонимной функции и заставило ее работать. Я не помню, пробовал ли я это.
Бассим

1
В первом случае adjustSizeметод теряет контекст this, в то время как второй вызов CmsContent.adjustSize()заповедники this, то есть this === CmsContent. Если CmsContentэкземпляр требуется в adjustSizeметоде, то первый случай завершится неудачей. Второй случай будет работать для любого вида вызова функции, поэтому рекомендуется всегда передавать анонимную функцию.
Генри Блит

1
@HenryBlyth Спасибо! +1
басим

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> 

3

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

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

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


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

0

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

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

 function someFun() {
 //use your code
 }

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

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

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...
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.