Bagaimana cara memicu event resize window di JavaScript?


327

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?

Jawaban:


382

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

6
Fungsi anonim Anda tidak perlu. window.onresize = doALoadOfStuff; Juga, ini tidak menjawab pertanyaan, jawaban pinouchon di bawah adalah jawaban yang benar.
Dennis Plucinik

42
Untuk Google r's: Lihatlah jawaban @ avetisk.
Fabian Lauer

1
Merupakan ide bagus untuk memisahkan diri, tetapi dalam kasus saya ini, itu tidak berhasil. Hanya memanggil metode pengubahan ukuran tidak berfungsi karena jika pengubahan ukuran jendela tidak dipicu berbagai div / kontainer lain tidak akan memiliki ketinggian yang ditetapkan.
PandaWood

@ PandaWood - maka contoh terakhir saya lebih baik dalam kasus Anda.
Fenton

Terima kasih @ user75525
Bondsmith

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

11
tampaknya bekerja dengan Chrome, FF, Safari, tetapi tidak: IE!
Davem M

14
jQuery's triggersebenarnya tidak memicu acara "resize" asli. Ini hanya memicu pendengar acara yang telah ditambahkan menggunakan jQuery. Dalam kasus saya, perpustakaan pihak ke-3 sedang mendengarkan langsung acara "mengubah ukuran" asli dan ini adalah solusi yang bekerja untuk saya.
chowey

2
Solusi hebat dan sederhana. Meskipun, saya pikir Anda harus menambahkan beberapa kode untuk kompatibilitas IE (sejauh yang saya lihat, untuk IE, kita harus menggunakan window.fireEvent)
Victor

35
ini tidak berfungsi pada semua perangkat untuk saya. saya harus memicu acara seperti ini: var evt = document.createEvent ('UIEvents'); evt.initUIEvent ('resize', true, false, window, 0); window.dispatchEvent (evt);
Manfred

19
Gagal dengan "Objek tidak mendukung tindakan ini" di
IE11

156

Dengan jQuery, Anda dapat mencoba memanggil pemicu :

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

3
Kasus penggunaan untuk ini adalah ketika plugin jQuery menggunakan peristiwa mengubah ukuran jendela menjadi responsif, tetapi Anda memiliki bilah sisi yang runtuh. Wadah plugin diubah ukurannya, tetapi jendela tidak.
isherwood

4
Tidak perlu untuk JQuery tetapi saya lebih suka solusi JQuery karena produk saya menggunakan JQuery secara luas.
Sri

Di mana ini akan ditambahkan untuk mengubah ukuran halaman wordpress setelah dimuat?
SAHM

Ini tidak berfungsi untuk saya di Chrome terbaru, jawaban ini tidak: stackoverflow.com/a/22638332/1296209
webaholik

1
ini adalah apa yang awalnya saya coba - itu tidak berhasil, tetapi window.dispatchEvent(new Event('resize'));ternyata
user2682863

54

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

4
Sayangnya dokumentasi untuk UIEvent.initUIEvent () mengatakan Do not use this method anymore as it is deprecated.The docs createEvent mengatakan "Banyak metode yang digunakan dengan createEvent, seperti initCustomEvent, yang usang. Gunakan acara konstruktor sebagai gantinya." Halaman ini terlihat menjanjikan untuk acara UI.
Balap Kecebong

9
Benar, tetapi IE11 tidak mendukung new Event()metode ini. Saya pikir sebagai peretasan terhadap peramban lama, Anda dapat melakukan sesuatu seperti if (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ }. Di mana metode saat ini adalah jawaban avetisk .
BrianS

@pomber Terima kasih atas solusinya, Sebenarnya saya mencoba memicu acara khusus untuk mengubah ukuran jendela untuk mengubah ukuran bagan saya ... solusi Anda menyelamatkan hari saya
Dinesh Gopal Chand

49

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

1
Ini adalah cara yang baik untuk melakukannya di browser tanpa menggunakan jQuery.
kgx

tidak tahu mengapa ini bukan jawaban teratas ...... ini lebih baik daripada jawaban "baik atau" yang diterima ....
SPillai

14

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

Bekerja di Chrome hari ini.
webaholik

9

hanya

$(window).resize();

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


3
Dan bahkan jika Anda memiliki jQuery, itu hanya memicu peristiwa yang terikat dengan jQuery.
adamdport

0

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" >..

0

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

Berfungsi bagus di Chrome dan FF, tetapi tidak berhasil di IE11
Collins

@Collins - terima kasih atas pembaruannya, saya pikir saya telah memverifikasi ini di IE11 ... Saya akan mencoba untuk mengambil waktu kemudian untuk memperbarui ini, terima kasih atas umpan baliknya.
webaholik

0

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

-3

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.


2
Mengapa ini ditandai? Apakah itu salah? Apakah ini tergantung pada browser?
Peter Wone

2
Ini tidak berfungsi di browser apa pun : Chrome, Firefox, IE, Firefox diuji.
fregante

1
Firefox 7+, dan mungkin browser modern lainnya, tidak lagi mengizinkan memanggil metode ini dalam banyak kasus. Selain itu, tidak diinginkan untuk benar-benar mengubah ukuran jendela untuk memicu acara.
user247702

Baik resizeBy () dan resizeTo () berfungsi dengan baik di Chrome ver terbaru yang stabil. 76.0
VanagaS
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.