如何触发 window.onresize 事件？

Question

我试图以编程方式触发窗口上的调整大小事件：

var evt = document.createEvent('HTMLEvents');
evt.initEvent('resize', true, false);
window.dispatchEvent(evt);

不幸的是，这不起作用。我正在尝试让 ExtJS 库进行重新计算，它使用 DOM Level 3 事件，所以我不能只调用 window.onresize();。

Answer 1

您正在创建错误的事件。

调整大小是一个 UIEvent，在此处阅读规范

您需要执行的操作这个：

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

在这里查看它的实际情况：http://jsfiddle.net/9hsBA/

Answer 2

如果 createEvent 可能弃用，转而使用CustomEvent，这是使用 CustomEvent API 的类似代码片段：

var ev = new CustomEvent('resize'); //instantiate the resize event
ev.initEvent('resize');

window.dispatchEvent(ev); // fire 'resize' event!

Answer 3

以防万一其他人需要这个，在 Extjs 4.1 中你可以做一些典型的不优雅的事情......

    Ext.ComponentQuery.query('viewport')[0].doLayout();

在视口上不需要 id - .query('viewport') 部分使用视口的别名配置。