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

Question

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

显然我不希望用户必须调整浏览器窗口的大小才能使页面正确显示,所以我想知道是否有一种方法可以在页面首次加载时以编程方式触发附加到浏览器调整大小事件的处理程序？

更新

我发现以下代码将触发附加到窗口resize事件的任何处理程序:

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

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

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

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

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

我认为您应该首先调查为什么页面无法正确呈现。对我来说，依赖调整大小后重新渲染听起来很老套。

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