javascript 由窗口调整大小触发的 DOM 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8712036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DOM event fired by window resize
提问by Dónal
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.
我确认这确实触发了窗口的调整大小事件处理程序，但是当我在 Firebug 控制台中运行此代码时，它并没有解决布局问题。
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?
是否有可能当手动调整浏览器大小时，调整大小事件会向下传播到窗口的所有子级，但是当执行上面的代码时，调整大小处理程序仅在窗口本身上触发？
回答by Slava Jinjikhashvilli
For IE compatibility
为了 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();
回答by dalvallana
I tried this in Chrome, Firefox and IE11, and it works:
我在 Chrome、Firefox 和 IE11 中尝试过这个，它有效：
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
回答by Bouke
I think you should investigate why the page does not render correctly in the first place. Relying on a re-render after resize sounds hackish to me.
我认为您应该首先调查为什么页面无法正确呈现。在调整大小后依赖重新渲染对我来说听起来很hackish。
Although manually firing a resizeevent might not give the correct results, you can also try to hide/show an event triggering a re-render event. This might result in screen flickering, so it is not the optimal solution.
虽然手动触发resize事件可能不会给出正确的结果，但您也可以尝试隐藏/显示触发重新渲染事件的事件。这可能会导致屏幕闪烁，因此它不是最佳解决方案。
回答by yuvilio
Can also be done with CustomEvent:
也可以用CustomEvent来完成：
var ev = new CustomEvent('resize'); //instantiate the resize event
ev.initEvent('resize');
window.dispatchEvent(ev); // fire 'resize' event!
回答by Rick Strahl
There's an window.onresize event that fires when the window is resized. You can force a resize by changing the window.width or height by a pixel and then setting it back on a small timer.
有一个 window.onresize 事件会在调整窗口大小时触发。您可以通过将 window.width 或 height 更改为一个像素，然后将其设置回一个小计时器来强制调整大小。
With jQuery you can do something like this:
使用 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, I've seen this myself before, but I agree with @bouke that you should defintitely try to identify what's causing the broken layout. I find it usually has to do with floated content or overflow of text containers that causes these sorts of problems.
FWIW，我自己以前见过这个，但我同意@bouke 的观点，你应该尝试找出导致布局损坏的原因。我发现它通常与导致此类问题的浮动内容或文本容器溢出有关。
