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

本文翻译自：How to trigger the window resize event in JavaScript?

I have registered a trigger on window resize. 我在窗口调整大小时注册了一个触发器。 I want to know how I can trigger the event to be called. 我想知道如何触发要调用的事件。 For example, when hide a div, I want my trigger function to be called. 例如，当隐藏div时，我希望调用我的触发器函数。

I found window.resizeTo() can trigger the function, but is there any other solution? 我发现window.resizeTo()可以触发该功能，但还有其他解决方案吗？

---

#1楼

参考：https://stackoom.com/question/7D4e/如何在JavaScript中触发窗口调整大小事件

---

#2楼

使用jQuery，您可以尝试调用trigger ：

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

---

#3楼

Where possible, I prefer to call the function rather than dispatch an event. 在可能的情况下，我更喜欢调用函数而不是调度事件。 This works well if you have control over the code you want to run, but see below for cases where you don't own the code. 如果您可以控制要运行的代码，则此方法很有效，但请参阅下面有关您不拥有代码的情况。

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

In this example, you can call the doALoadOfStuff function without dispatching an event. 在此示例中，您可以在不调度事件的情况下调用doALoadOfStuff函数。

In your modern browsers, you can trigger the event using: 在现代浏览器中，您可以使用以下命令触发事件 ：

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

This doesn't work in Internet Explorer, where you'll have to do the longhand: 这在Internet Explorer中不起作用，您必须在其中进行缩写：

var resizeEvent = window.document.createEvent('UIEvents'); 
resizeEvent.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(resizeEvent);

jQuery has the trigger method , which works like this: jQuery有trigger方法 ，其工作方式如下：

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

And has the caveat: 并有警告：

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event. 虽然.trigger（）模拟事件激活，但是使用合成的事件对象，它并不能完美地复制自然发生的事件。

You can also simulate events on a specific element... 您还可以模拟特定元素上的事件......

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}

---

#4楼

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

---

#5楼

window.resizeBy() will trigger window's onresize event. window.resizeBy()将触发window的onresize事件。 This works in both Javascript or VBScript . 这适用于Javascript或VBScript 。

window.resizeBy(xDelta, yDelta) called like window.resizeBy(-200, -200) to shrink page 200px by 200px. window.resizeBy(xDelta, yDelta)调用如window.resizeBy(-200, -200)将页面200px缩小200px。

---

#6楼

I wasn't actually able to get this to work with any of the above solutions. 我实际上无法使用上述任何解决方案。 Once I bound the event with jQuery then it worked fine as below: 一旦我用jQuery绑定事件，它就可以正常工作如下：

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