web-dev-qa-db-ja.com

JavaScriptでウィンドウサイズ変更イベントを発生させる方法は？

ウィンドウのサイズ変更時にトリガーを登録しました。イベントが呼び出される方法を知りたいのですが。たとえば、divを非表示にするときは、自分のtrigger関数を呼び出す必要があります。

window.resizeTo()が関数を起動できることがわかりましたが、他に解決策はありますか？

javascriptjqueryevents
284
zhongshu

可能であれば、イベントを送出するよりも関数を呼び出す方が好きです。実行したいコードを管理している場合はこれでうまくいきますが、コードを所有していない場合は以下を参照してください。

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);
}
307
Fenton
window.dispatchEvent(new Event('resize'));
631
avetisk

JQueryを使えば、 trigger を呼び出すことができます。

$(window).trigger('resize');
150
Benjamin Crouzier

IEでも機能する純粋なJS（ @ 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);
});
50
pomber

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

私は実際にこれを上記の解決策のどれでもうまく動かすことができませんでした。イベントをjQueryでバインドしたら、以下のようにうまくいきました。

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

ただ

$(window).resize();

あなたが求めていることを誤解しない限り、私は私が使っているものです。

6
Matt Sich

これはすべてのブラウザで機能するはずです：

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

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" >..
0
Sergio Wilson