Як запустити подію зміни розміру вікна в JavaScript?

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

Я виявив, що window.resizeTo()може запустити функцію, але чи є якесь інше рішення?

Там, де це можливо, я вважаю за краще викликати функцію, а не відправляти подію. Це добре працює, якщо у вас є контроль над кодом, який ви хочете запустити, але див. Нижче для випадків, коли ви не володієте кодом.

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

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

За допомогою jQuery можна спробувати викликати тригер :

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

Чистий 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);
});

Поєднання відповідей пам’яті та 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);
}

Насправді я не зміг змусити це працювати з будь-яким із перерахованих вище рішень. Як тільки я пов’язав подію з jQuery, вона спрацювала нормально, як показано нижче:

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

просто

$(window).resize();

це те, що я використовую ... якщо я не зрозумів, що ти просиш.

Відповідь з RxJS

Скажіть, як щось у кутовому

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

Оскільки моє початкове значенняWith Value може бути неправильним (відправлення для виправлення)

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

Сказати Кутовий (я міг ..)

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

Я вважаю, що це має працювати для всіх браузерів:

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

Це можна зробити за допомогою цієї бібліотеки. 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);

window.resizeBy()запустить подію onresize вікна. Це працює як у Javascript, так і в VBScript .

window.resizeBy(xDelta, yDelta)називається, як window.resizeBy(-200, -200)скоротити сторінку 200px на 200px.