Come attivare l'evento di ridimensionamento della finestra in JavaScript?

Ho registrato un trigger sul ridimensionamento della finestra. Voglio sapere come posso attivare l'evento da chiamare. Ad esempio, quando nascondo un div, voglio che venga chiamata la mia funzione di trigger.

Ho scoperto che window.resizeTo()può attivare la funzione, ma c'è qualche altra soluzione?

Ove possibile, preferisco chiamare la funzione piuttosto che inviare un evento. Funziona bene se hai il controllo sul codice che vuoi eseguire, ma vedi sotto per i casi in cui non possiedi il codice.

window.onresize = doALoadOfStuff;

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

In questo esempio, è possibile chiamare la doALoadOfStufffunzione senza inviare un evento.

Nei tuoi browser moderni, puoi attivare l'evento usando:

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

Questo non funziona in Internet Explorer, dove dovrai fare il longhand:

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

jQuery ha il triggermetodo , che funziona in questo modo:

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

E ha l'avvertenza:

Sebbene .trigger () simuli l'attivazione di un evento, completo di un oggetto evento sintetizzato, non replica perfettamente un evento naturale.

Puoi anche simulare eventi su un elemento specifico ...

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

Con jQuery, puoi provare a chiamare trigger :

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

Un JS puro che funziona anche su IE (dal commento di @Manfred )

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

O per angolare:

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

Combinare le risposte di pomber e avetisk per coprire tutti i browser e non causare avvisi:

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

In realtà non sono riuscito a farlo funzionare con nessuna delle soluzioni sopra. Una volta associato l'evento con jQuery, ha funzionato bene come di seguito:

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

appena

$(window).resize();

è quello che uso ... a meno che non fraintenda quello che stai chiedendo.

Risposta con RxJS

Di 'qualcosa come in angolare

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

Se si desidera un abbonamento manuale (o non angolare)

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

Dal momento che il mio avvio iniziale con valore potrebbe essere errato (spedizione per correzione)

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

In dire angolare (potrei ..)

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

Credo che questo dovrebbe funzionare per tutti i browser:

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

Puoi farlo con questa libreria. 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()attiverà l'evento onresize della finestra. Funziona in Javascript o VBScript .

window.resizeBy(xDelta, yDelta)chiamato mi piace window.resizeBy(-200, -200)ridurre la pagina 200px di 200px.