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

Question

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

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

Answer 1

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

Answer 2

在可能的情况下，我更喜欢调用函数而不是分派事件。 如果您可以控制要运行的代码，这会很有效，但请参阅下文了解您不拥有代码的情况。

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 3

使用 jQuery，您可以尝试调用触发器：

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

Answer 4

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

Answer 5

也适用于 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);
});

Answer 6

我实际上无法使它与上述任何解决方案一起使用。 一旦我将事件与 jQuery 绑定，它就可以正常工作，如下所示：

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

Answer 7

只是

$(window).resize();

是我使用的......除非我误解了你的要求。

Answer 8

我相信这应该适用于所有浏览器：

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 9

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

在说角度（我可以..）

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

Answer 10

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

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

Answer 11

window.resizeBy()会触发窗口的 onresize 事件。 这适用于Javascript或VBScript 。

window.resizeBy(xDelta, yDelta)调用类似window.resizeBy(-200, -200)将页面 200px 缩小 200px。