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

Question

我有一个布局相当复杂的页面。最初打开页面时，某些元素的对齐存在问题。但是，可以通过更改浏览器窗口的大小（永久）解决此问题。

显然我不希望用户必须调整浏览器窗口的大小才能正确显示页面，所以我想知道是否有一种方法可以在页面首次加载？

更新

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

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

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

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

是否有可能当手动调整浏览器大小时，resize 事件会向下传播到 window 的所有子级，但是当执行上面的代码时，resize 处理程序只会在 window 本身上触发？

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 的观点，你应该明确地尝试找出导致布局损坏的原因。我发现它通常与导致此类问题的浮动内容或文本容器溢出有关。