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

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

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

#1 楼

在可能的情况下，我更喜欢调用函数而不是调度事件。如果您可以控制要运行的代码，则此方法效果很好，但是如果您不拥有该代码，请参见下面的内容。事件。
在现代浏览器中，您可以使用以下方法触发事件：

window.onresize = doALoadOfStuff;

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

在Internet Explorer中这是行不通的，而您必须进行长期记录：

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

jQuery具有doALoadOfStuff方法，其工作原理如下：

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

并有一个警告：事件对象，它不能完美地复制自然发生的事件。

您还可以在特定元素上模拟事件...

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

您的匿名功能是不必要的。 window.onresize = doALoadOfStuff;另外，这不能回答问题，下面的pinouchon答案是正确的答案。

– Dennis Plucinik
2013年9月5日18:18

致Google员工：看看@avetisk的答案。

–法比安·劳尔（Fabian Lauer）
2015年10月17日，11：31

分离是个好主意，但在我/这种情况下，它不起作用。仅仅调用resize方法是行不通的，因为如果未触发窗口调整大小，则其他各种div /容器将不会设置适当的高度。

– PandaWood
16年6月10日在8:02

@PandaWood-那么我的最后一个例子对您而言更好。

– Fenton
16年6月10日在8:10

window.dispatchEvent（new Event（'resize'））;在最新的Chrome浏览器中导致异常：“未捕获的TypeError：无法在'EventTarget'上执行'dispatchEvent'：参数1的类型不是'Event'。”

– Johncl
20-09-07在8:10

#2 楼

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

似乎可以与Chrome，FF，Safari一起使用，但不能：IE！

– Davem M
2014年3月18日在22:14

jQuery的触发器实际上不会触发本地的“调整大小”事件。它仅触发已使用jQuery添加的事件侦听器。以我为例，第3方库正在直接侦听本地的“调整大小”事件，这是对我有用的解决方案。

–chowey
2014年5月26日在21:09

简便的解决方案。虽然，我认为您应该为IE兼容性添加一些代码（据我所知，对于IE，我们必须使用window.fireEvent）

–维克多
2015年4月1日，7：58

这对我来说并不适用于所有设备。我必须触发这样的事件：var evt = document.createEvent（'UIEvents'）; evt.initUIEvent（'resize'，true，false，window，0）; window.dispatchEvent（evt）;

– Manfred
15年6月16日在14:42

在我的IE11中，“对象不支持此操作”失败

–pomber
15年8月9日，0：46

#3 楼

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

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

一个用例是当jQuery插件使用窗口调整大小事件来响应时，但是您的边栏崩溃了。插件的容器被调整大小，但是窗口没有被调整。

–艾舍伍德
2014年10月15日19:10

确实不需要JQuery，但我更喜欢JQuery解决方案，因为我的产品广泛使用JQuery。

–斯里兰卡
15年5月15日在21:52

加载后，将在何处添加此内容以调整wordpress页面的大小？

– SAHM
16年8月18日在3:58

在最新的Chrome浏览器中，这不适用于我，此答案可以：stackoverflow.com/a/22638332/1296209

– webaholik
18-09-15在19:27

这是我最初尝试的方法-没用，但是window.dispatchEvent（new Event（'resize'））;做了

–user2682863
19年5月5日在16:48

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

这是在不使用jQuery的情况下跨浏览器执行此操作的好方法。

– kgx
18年1月12日在14:50

不知道为什么这不是最好的答案……这比被接受的“或者”答案要好。

– SPillai
18-10-31在20:32

#5 楼

纯JS也可用于IE（来自@Manfred评论）

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

或用于angular：

不幸的是，UIEvent.initUIEvent（）的文档说不要使用此方法，因为它已被弃用。 createEvent文档说：“已弃用了与createEvent一起使用的许多方法，如initCustomEvent。请改用事件构造函数。”此页面看起来很有希望进行UI事件。

–竞速Ta
2015年12月3日在5:27

是的，但是IE11不支持新的Event（）方法。我认为，作为针对较旧浏览器的黑客，您可以执行以下操作：if（Event.prototype.initEvent）{/ *不推荐使用的方法* /} else {/ *当前方法* /}。当前方法是avetisk的答案。

– Brians
16年1月19日在23:31

@pomber感谢您的解决方案，实际上我正试图触发自定义事件以调整窗口大小以调整图表大小...您的解决方案可以节省我的时间

–Dinesh Gopal Chand
19年2月15日在15:08

#6 楼

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

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

今天可以在Chrome浏览器中使用。

– webaholik
'18 Sep 15'在7:18

#7 楼

只是

$(window).resize();

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

即使您拥有jQuery，它也只会触发与jQuery绑定的事件。

–adamdport
16年8月11日在17:50

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

在Chrome和FF中效果很好，但在IE11中不起作用

–科林斯
20 Mar 30 '20 at 7:58

@Collins-感谢您的更新，以为我已经在IE11上对此进行了验证...我将花一些时间来更新它，感谢您的反馈。

– webaholik
20-3-30在12:37

#9 楼

您可以使用此库执行此操作。 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);

#10 楼

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

#11 楼

window.resizeBy()将触发窗口的onresize事件。这可以在Javascript或VBScript中使用。

为什么将其记下来？不对吗是否依赖浏览器？

– Peter Wone
2014年5月4日4:08

这不适用于任何浏览器：Chrome，Firefox，IE，Firefox经过测试。

–fregante
2015年9月25日在18:28

在大多数情况下，Firefox 7+和其他可能的现代浏览器不再允许调用此方法。另外，不希望实际调整窗口大小来触发事件。

–user247702
16年8月10日在9:04

在最新的稳定版Chrome版本中，resizeBy（）和resizeTo（）都可以正常工作。 76.0

–VanagaS
19-09-21在12:33

编程黑洞网