如何在JavaScript中触发窗口调整大小事件？

Question

如何在JavaScript中触发窗口调整大小事件？

我在窗口调整大小时注册了一个触发器。我想知道如何触发要调用的事件。例如，当隐藏div时，我希望调用我的触发器函数。

我发现window.resizeTo()可以触发该功能，但还有其他解决方案吗？

Answer 1

在可能的情况下，我更喜欢调用函数而不是调度事件。如果您可以控制要运行的代码，则此方法很有效，但请参阅下面有关您不拥有代码的情况。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);}

Answer 2

我相信这适用于所有浏览器：var event;if (typeof (Event) === 'function') {     event = new Event('resize');} else { /*IE*/     event = document.createEvent('Event');     event.initEvent('resize', true, true);}window.dispatchEvent(event);

Answer 3

对RxJS的回应说像Angular中的东西size$:&nbsp;Observable<number>&nbsp;=&nbsp;fromEvent(window,&nbsp;'resize').pipe( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;debounceTime(250), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;throttleTime(300), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mergeMap(()&nbsp;=>&nbsp;of(document.body.clientHeight)), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;distinctUntilChanged(), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startWith(document.body.clientHeight), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);如果需要手动订阅（或非角度）this.size$.subscribe((g)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('clientHeight',&nbsp;g); &nbsp;&nbsp;&nbsp;&nbsp;})由于我的初始startWith值可能不正确（发送更正）window.dispatchEvent(new&nbsp;Event('resize'));在说Angular（我可以..）<div&nbsp;class="iframe-container"&nbsp;&nbsp;[style.height.px]="size$&nbsp;|&nbsp;async"&nbsp;>..