Как прослушать событие изменение окна браузера?

Question

[malcore_hardcore968]

У меня есть два блока, я хочу получить высоту первого блока и присвоить эту высоту второму блоку. Все получилось, но высота применяется только один раз, когда загружается страница.
Можно как-нибуть прослушать событие изменение окна браузера и там дальше применять высоту ко второму блоку каждый раз?

Answer 1

[gleendo]

window.addEventListener(`resize`, event => {
	// some code
}, false);

// PS. Кажется вы делаете что то не то. Возможно стоило бы просто прослушивать изменение размера первого блока и изменять размер второго, а не слушать resize всего окна.
// И вообще кажется все это можно сделать на css.
// Объясните для чего вам изменять размер блока в зависимости от размера другого блока?

Comments

[malcore_hardcore968]

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

[Алексей Бурлака]

Флексбокс как раз обеспечивает баланс высот. Если блоки внутри одного родителя.

[Олег Андрианов]

Алексей Бурлака, если флекс строки находятся во флекс колонке, то высота каждой строки будет равна содержимому. Если есть способ сделать это буду премного благодарен.

Answer 2

[Camaro67]

window.onresize = function( event ) {};

Answer 3

[malcore_hardcore968]

Нашел выход :) Метод resize у jQuery

Comments

[Сергей delphinpro]

универсальный метод .on()

.on('любоеСобытие', function(){ ... })
.on('resize', function(){ ... })
.on('click', function(){ ... })
.on('mousemove', function(){ ... })
.on('touchstart', function(){ ... })

[Дмитрий Лузанов]

Подключать jQuery ради обертки над нативным методом? Ужс.

[Camaro67]

Тащить jQuery ради одного события - это не выход, а хардкор.

[malcore_hardcore968]

Camaro67: Predve4niy: у меня до этого метода, еще 140 строк кода на jquery написано )))

[Camaro67]

malcore_hardcore968: Ну так и нужно тогда в тэгах указывать jQuery, а не только JS, если у вас jQuery в проекте задействована.

Answer 4

[Константин Шуляренко]

Тоже искал решение проблемы, когда на мобильном браузере при скроллинге срабатывает ресайз, дело в сворачивающемся поле адресной строки при прокрутки вниз и разворачивающемся при прокрутке вверх, изза
этого меняется высота клиента. Использую такой код, который работает на 100%:

function resizeWidthOnly(a,b) {  
  var c = [window.innerWidth];
  return onresize = function() {
    var d = window.innerWidth,
        e = c.length;
    c.push(d);
    if(c[e]!==c[e-1]){
      clearTimeout(b);
      b = setTimeout(a, 50);
    } 
  }, a;
}

/* используйте функцию resizeWidthOnly вместо window.onresize   */

resizeWidthOnly(function() {
  console.log('Сработало')
});

Протестировать можно на этой странице

Answer 5

[RidgeA]

https://developer.mozilla.org/ru/docs/Web/Events/resize