窗口大小調整觸發的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

我在Chrome，Firefox和IE11中試過這個，它的工作原理如下：

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

Answer 3

我認為您應該首先調查頁面無法正確呈現的原因。 在調整大小后依賴重新渲染聲音對我來說是個hackish。

雖然手動觸發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你應該明確地確定是什么導致了破壞的布局。 我發現它通常與浮動內容或文本容器溢出有關，導致這些問題。