Bagaimana cara memicu event resize window di JavaScript?

Saya telah mendaftarkan pemicu pada ukuran jendela. Saya ingin tahu bagaimana saya bisa memicu acara dipanggil. Misalnya, ketika menyembunyikan div, saya ingin fungsi pemicu saya dipanggil.

Saya menemukan window.resizeTo()dapat memicu fungsi, tetapi apakah ada solusi lain?

Jika memungkinkan, saya lebih suka memanggil fungsi daripada mengirim acara. Ini berfungsi baik jika Anda memiliki kendali atas kode yang ingin Anda jalankan, tetapi lihat di bawah untuk kasus-kasus di mana Anda tidak memiliki kode.

window.onresize = doALoadOfStuff;

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

Dalam contoh ini, Anda dapat memanggil doALoadOfStufffungsi tanpa mengirim acara.

Di browser modern Anda, Anda dapat memicu acara menggunakan:

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

Ini tidak berfungsi di Internet Explorer, di mana Anda harus melakukannya dengan tangan:

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

jQuery memiliki triggermetode , yang berfungsi seperti ini:

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

Dan memiliki peringatan:

Meskipun .trigger () mensimulasikan aktivasi peristiwa, lengkap dengan objek acara yang disintesis, itu tidak sempurna mereplikasi peristiwa yang terjadi secara alami.

Anda juga dapat mensimulasikan acara pada elemen tertentu ...

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

Dengan jQuery, Anda dapat mencoba memanggil pemicu :

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

JS murni yang juga berfungsi di IE (dari @Manfred comment )

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

Atau untuk sudut:

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

Menggabungkan jawaban pomber dan avetisk untuk mencakup semua browser dan tidak menyebabkan peringatan:

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

Saya sebenarnya tidak bisa membuat ini bekerja dengan salah satu solusi di atas. Setelah saya mengikat acara dengan jQuery maka itu berfungsi dengan baik seperti di bawah ini:

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

hanya

$(window).resize();

adalah apa yang saya gunakan ... kecuali saya salah paham dengan apa yang Anda minta.

Respon dengan RxJS

Katakan Seperti sesuatu di Angular

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

Jika langganan manual diinginkan (Atau Tidak Sudut)

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

Karena awal saya memulaiDengan Nilai mungkin salah (pengiriman untuk koreksi)

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

Di katakan Angular (saya bisa ..)

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

Saya percaya ini harus bekerja untuk semua 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);

Anda dapat melakukan ini dengan perpustakaan ini. 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()akan memicu event onresize window. Ini berfungsi baik dalam Javascript atau VBScript .

window.resizeBy(xDelta, yDelta)disebut suka window.resizeBy(-200, -200)menyusutkan halaman 200px kali 200px.