窗口调用DOM事件调整大小 [英] DOM event fired by window resize

问题描述

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

显然，我不希望用户调整浏览器窗口大小订单页面正确显示，所以我想知道有没有办法我可以编程触发附加到浏览器调整大小事件的处理程序页首先加载？

更新

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

  if（document.createEvent）{// W3C 
 var ev = document.createEvent（'Event'）; 
 ev.initEvent（'resize'，true，true）; 
 window.dispatchEvent（ev）; 
} else {// IE 
 document.fireEvent（'onresize'）; 
} 
  

我确认这确实触发了窗口的大小事件处理程序，但是当我在Firebug控制台中运行此代码，它不会修复布局问题。

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

如果手动调整浏览器大小，调整大小的事件可能会导致所有的孩子的窗口，但是当执行上面的代码时，调整大小的处理程序只会在窗口本身上触发？

解决方案

对于IE兼容性

  function fireResize（）{
 if（document.createEvent）{// W3C 
 var ev = document。 createEvent（ '事件'）; 
 ev.initEvent（'resize'，true，true）; 
 window.dispatchEvent（ev）; 
} 
 else {// IE 
元素= document.documentElement; 
 var event = document.createEventObject（）; 
 element.fireEvent（onresize，event）; 
} 
}; 
 fireResize（）; 
  

I have a page that has a fairly complicated layout. When the page is initially opened there's a problem with the aligment of some of the elements. However, this problem can be resolved (permanently) by changing the size of the brower window.

Obviously I don't want the user to have to resize the browser window in order for the page to display correctly, so I'm wondering if there's a way I can programatically trigger the handlers attached to the browser's resize event when the page first loads?

Update

I found out that the following code will fire any handlers attached to the window's resize event:

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

I verified that this does indeed trigger the window's resize event handlers, but when I run this code in the Firebug console, it doesn't fix the layout problem.

So it seems that the code which fixes the layout when the browser is resized is not a handler of the window's resize event, but a handler of something else. How can I go about tracking down which event handler I need to fire?

Is it possible that when the browser is manually resized, the resize event propogates down to all the children of window, but when the code above is executed, the resize handler only fires on window itself?

解决方案

For IE compatibility

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();

这篇关于窗口调用DOM事件调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！