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

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

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

これを上記のソリューションのいずれかで実際に動作させることはできませんでした。イベントをjQueryにバインドすると、以下のようにうまく機能しました。

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

ただ

$(window).resize();

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

RxJSでの応答

Angularで何かのように言う

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

手動サブスクリプションが必要な場合（またはAngularでない場合）

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

私の最初のstartWith値が正しくない可能性があるため（修正のためのディスパッチ）

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

ある意味でAngular（私はできました..）

<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 x 200pxに縮小するように呼び出されました。