Javascript 强制调整窗口大小以触发

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1861109/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 21:40:02  来源:igfitidea点击:

Forcing windows resize to fire

javascript

提问by Gandalf StormCrow

I have problems with my layout, when I re-size window manually and restore it to normal everything is in the perfect place.

我的布局有问题,当我手动调整窗口大小并将其恢复正常时,一切都在完美的地方。

Is it possible to trick the browser and do something with JavaScript that would actually make the browser think that the page has been re-sized so that my layout looks as it should?

是否有可能欺骗浏览器并使用 JavaScript 做一些实际上会使浏览器认为页面已重新调整大小以便我的布局看起来应该如此的事情?

UPDATE:

更新:

Can I re-size and restore window so that user barely notices?

我可以重新调整窗口大小和恢复窗口以便用户几乎不会注意到吗?

采纳答案by Bj?rn

This is possible with Mootools(which means it can be done without a framework as well), here's an example:

这可以通过Mootools 实现(这意味着它也可以在没有框架的情况下完成),这是一个示例:

window.addEvent('domready', function() {
 window.addEvent('resize', function() {
  alert('f');
 });
 (function() {
  window.fireEvent('resize');
 }).delay(3000);
});

3 seconds after the DOM-structure has loaded, the resize-event will be fired for the window-object.

DOM 结构加载 3 秒后,将为窗口对象触发调整大小事件。

Edit;

编辑;

I have no clue how Mootools solves their fireEvent for the resize event. I tried Google, but found nada. You can of course resize the window manually, but this is really a hack:

我不知道 Mootools 如何为 resize 事件解决他们的 fireEvent。我试过谷歌,但找到了 nada。您当然可以手动调整窗口大小,但这确实是一个技巧:

function fireOnResizeEvent() {
 var width, height;

 if (navigator.appName.indexOf("Microsoft") != -1) {
  width  = document.body.offsetWidth;
  height = document.body.offsetHeight;
 } else {
  width  = window.outerWidth;
  height = window.outerHeight;
 }

 window.resizeTo(width - 1, height);
 window.resizeTo(width + 1, height);
}

window.onresize = function() {
 alert("Resized!");
}

回答by BillyTom

Since then a better solution has been posted in https://stackoverflow.com/a/18693617/2306587:

从那时起,一个更好的解决方案已发布在https://stackoverflow.com/a/18693617/2306587 中

window.dispatchEvent(new Event('resize'));

回答by Josh Stodola

You can resize the window like this...

您可以像这样调整窗口大小...

window.resizeTo(width, height);

And if you need to trigger the event handler, you can do that like this...

如果你需要触发事件处理程序,你可以这样做......

window.onresize();

回答by Flock Dawson

You could use the jQuery resize()method, like this:

您可以使用 jQueryresize()方法,如下所示:

$(window).resize();

回答by prodigitalson

toggle the display attribute on the areas that need to be redrawn. for example:

在需要重绘的区域上切换显示属性。例如:

var toDraw = document.getElementById('redrawme');
toDraw.style.display = none;
toDraw.style.display = '';

I dont know whqt the result would be if you tried to do the entire body element as ive never tired it before.

我不知道如果你尝试做整个身体元素,结果会是什么,因为我以前从不厌倦它。

What are you doing that you need to force a redraw?

你在做什么需要强制重绘?