Как вызвать событие изменения размера окна в JavaScript?

Question

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

я нашел window.resizeTo() может вызвать функцию, но есть ли другое решение?

Answer 1

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

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

В этом примере вы можете вызвать doALoadOfStuff функционировать без отправки события.

В ваших современных браузерах вы можете вызвать событие, используя:

window.dispatchEvent(new Event('resize'));

Это не работает в Internet Explorer, где вам придется сделать условное обозначение:

var resizeEvent = window.document.createEvent('UIEvents'); 
resizeEvent .initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(resizeEvent);

JQuery имеет trigger метод, который работает так:

$(window).trigger('resize');

И имеет оговорку:

Несмотря на то, что.trigger() имитирует активацию события, в комплекте с синтезированным объектом события, она не полностью воспроизводит естественное событие.

Вы также можете моделировать события на конкретном элементе...

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}

Answer 2

window.dispatchEvent(new Event('resize'));

Answer 3

С помощью jQuery вы можете попробовать вызвать триггер:

$(window).trigger('resize');

Answer 4

Объединение ответов pomber и avetisk для всех браузеров без предупреждения:

if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
} else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}

Answer 5

Чистый JS, который также работает на IE (из комментария @Manfred)

var evt = window.document.createEvent('UIEvents'); 
evt.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(evt);

Или для угловых:

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false, $window, 0); 
    $window.dispatchEvent(evt);
});

Answer 6

Я не смог заставить это работать с любым из вышеперечисленных решений. После того, как я связал событие с jQuery, оно работало нормально, как показано ниже:

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');

Answer 7

Просто

$(window).resize();

это то, что я использую... если я не понимаю, что вы просите.

Answer 8

Я считаю, что это должно работать для всех браузеров:

var event;
if (typeof (Event) === 'function') {
    event = new Event('resize');
} else { /*IE*/
    event = document.createEvent('Event');
    event.initEvent('resize', true, true);
}
window.dispatchEvent(event);

Answer 9

Ответ с помощью RxJS

Скажи что-нибудь в Angular

size$: Observable<number> = fromEvent(window, 'resize').pipe(
            debounceTime(250),
            throttleTime(300),
            mergeMap(() => of(document.body.clientHeight)),
            distinctUntilChanged(),
            startWith(document.body.clientHeight),
          );

Если требуется ручная подписка (или не угловая)

this.size$.subscribe((g) => {
      console.log('clientHeight', g);
    })

Поскольку мое начальное значение startWith может быть неправильным (отправка на исправление)

window.dispatchEvent(new Event('resize'));

Скажем, Angular (я мог бы..)

<div class="iframe-container"  [style.height.px]="size$ | async" >..

Answer 10

Вы можете сделать это с помощью этой библиотеки. https://github.com/itmor/events-js

const events = new Events();

events.add({  
  blockIsHidden: () =>  {
    if ($('div').css('display') === 'none') return true;
  }
});

function printText () {
  console.log('The block has become hidden!');
}

events.on('blockIsHidden', printText);

Answer 11

window.resizeBy() вызовет событие onresize окна. Это работает как в Javascript, так и в VBScript.

window.resizeBy(xDelta, yDelta) называется как window.resizeBy(-200, -200) чтобы уменьшить страницу на 200 пикселей на 200 пикселей.