更新

我发现以下代码将触发附加到窗口调整大小事件的所有处理程序：

if (document.createEvent) { // W3C
    var ev = document.createEvent('Event');
    ev.initEvent('resize', true, true);
    window.dispatchEvent(ev);
} else { // IE
    document.fireEvent('onresize');
}

我确认这确实触发了窗口的resize事件处理程序，但是当我在Firebug控制台中运行此代码时，它不能解决布局问题。

因此，在调整浏览器大小时修复布局的代码似乎不是窗口调整大小事件的处理程序，而是其他东西的处理程序。我怎样才能追踪我需要触发的事件处理程序？

当手动调整浏览器大小时，调整大小事件可能会传播到窗口的所有子节点，但是当执行上面的代码时，调整大小处理程序只会触发窗口本身吗？

Answer 1

对于IE兼容性

function fireResize(){
    if (document.createEvent) { // W3C
        var ev = document.createEvent('Event');
        ev.initEvent('resize', true, true);
        window.dispatchEvent(ev);
    }
    else { // IE
        element=document.documentElement;
        var event=document.createEventObject();
        element.fireEvent("onresize",event);
    }
};
fireResize();

Answer 2

我在Chrome，Firefox和IE11中尝试了这个功能，它可以运行：

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

Answer 3

我认为您应该首先调查页面无法正确呈现的原因。调整大小后依赖重新渲染听起来像是对我不满。

虽然手动触发resize事件可能无法提供正确的结果，但您也可以尝试隐藏/显示触发重新渲染事件的事件。这可能会导致屏幕闪烁，因此它不是最佳解决方案。

Answer 4

也可以使用CustomEvent：

完成

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

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

Answer 5

窗口调整大小时会触发一个window.onresize事件。您可以通过将window.width或height更改为像素来强制调整大小，然后将其设置为小计时器。

使用jQuery，您可以执行以下操作：

$(function() { 
   $(window).width($(window).width() + 1);
  // delay so DOM can update and not batch UI updates
  setTimeout(function() { $(window).width($(window).width() -1); },3);
});

FWIW，我之前已经看过这个，但我同意@bouke你应该明确地确定导致布局破坏的原因。我发现它通常与浮动内容或文本容器溢出有关，导致这些问题。

窗口大小调整触发的DOM事件

更新

5 个答案: