强制 Windows 调整大小以触发事件

Question

我的布局出现问题，当我手动调整窗口大小并将其恢复到正常时，一切都处于完美的位置。

是否有可能欺骗浏览器并使用JavaScript做些什么，让浏览器认为页面已经被重新调整大小，以便我的布局看起来应该如此？

更新：

我能否调整窗口大小并恢复正常，以至于用户几乎不会注意到？

- Gandalf StormCrow

---

如果您的布局在调整大小后被修复，那么您应该修复布局。这是哪个浏览器？您能发布一个实时示例的链接吗？ - Pekka

不幸的是它在本地主机上，我没有将其在线化，问题是当你调整大小后它就被修复了。 - Gandalf StormCrow

我认为你应该真正研究如何修复布局。使用Javascript绕过这个问题是不可靠的。 - Pekka

这不是设计问题，设计本身没问题，但是在某些操作后，只有在重新调整大小之后设计才显得正常。正如我下面所说的：“问题如下：我有一个左侧边栏和中央div，单击后，使中央div占据自己的空间+左侧边栏的空间，此后需要调整大小才能将一切恢复正常”。 - Gandalf StormCrow

Answer 1

此后，更好的解决方案已经发布在https://dev59.com/i3I-5IYBdhLWcg3whImk#18693617上：

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

- BillyTom

---

值得注意的是，不支持IE11以下版本。https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Browser_compatibility - Kiee

根据 http://caniuse.com/#search=dispatchEvent 的说法，它应该适用于 IE 9+。然而 window.fireEvent() 在 IE 10 及以下版本也可以使用。 - Jason Godson

显然，在我的IE11中它不起作用。抛出“对象不支持此操作”的错误。 - Krzysztof Zbiciński

Answer 2

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

window.resizeTo(width, height);

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

window.onresize();

- Josh Stodola

---

我能在触发我的事件时手动触发onresize事件吗？ - Gandalf StormCrow

就像我的答案中所说的一样：window.onresize(); - Josh Stodola

window.onresize()对我无效：TypeError: Property 'onresize' of object [object global] is not a function。 - fnkr

根据@JoshStodola的说法，你可以这样做：window.onresize = function() {...};$(document).ready( window.onresize() );在JQuery 3和Firefox 55.0.3中运行良好。 - rask004

Answer 3

您可以使用jQuery的resize()方法，如下所示：

$(window).resize();

- Flock Dawson

---

不起作用，或者至少看起来没有任何影响。也许在某些条件下会有影响。 - Johann

Answer 4

这可以通过Mootools实现（这意味着也可以不使用框架），以下是一个示例：

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

DOM结构加载后3秒钟，窗口对象将触发resize事件。

编辑：

我不知道Mootools如何解决其resize事件的fireEvent。我尝试了谷歌，但没有找到任何信息。当然，您可以手动调整窗口大小，但这真的是一种hack方法：

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!");
}

- Björn

---

谢谢 Bjorn。我正在谷歌上寻找普通 JavaScript 的解决方案。 - Gandalf StormCrow

还没有任何东西，如果我快速调整/恢复大小，这是可能的吗？ - Gandalf StormCrow

抱歉Björn，我还有其他项目要处理..我猜它正在工作..我现在会接受你的答案（没有时间测试它）。谢谢。 - Gandalf StormCrow

我认为BillyTom的回答是最好的。我们可以接受那个答案或将其整合到这个答案中。 - Gavin Palmer

我同意@BillyTom的回答是最好的。然而，为了回答如何使用mootools，他们只需存储所有事件回调的句柄，并在“refireEvent”时直接调用该函数。请参见：https://github.com/mootools/mootools-core/blob/2f0aee54c40525e4261b556bc6ed2a12a619db73/Source/Element/Element.Event.js#L103 - Cody Allan Taylor

Answer 5

以下是可行的解决方案：

if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
} else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}

- shankar kanase

Answer 6

切换需要重新绘制的区域的显示属性。例如：

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

我不知道如果你尝试将整个body元素作为一个实体会得到什么结果，因为我以前从未尝试过。

你在做什么需要强制重绘吗？

- prodigitalson

---

嗯，问题如下，我有一个左侧边栏和中央div，在点击后，我使中央div占据自己的空间+左侧边栏空间，之后需要调整大小以将东西恢复正常。 - Gandalf StormCrow

你的列是如何布局的？就像之前建议的那样，很可能是你的布局需要修复。个人建议在一个带有清除浮动的包装器中将它们两个都向左浮动，并从那里进行修改。由于它们都在文档流中，所以我认为这应该可以解决你遇到的问题。 - prodigitalson

http://www.quirksmode.org/css/clearing.html - 自动方法 http://www.positioniseverything.net/easyclearing.html - 伪类方法 - prodigitalson

你能发布一下你布局和CSS的相关部分吗？ - prodigitalson

我已经完成了。http://stackoverflow.com/questions/1859559/trying-to-change-width-on-click - Gandalf StormCrow

好的，在那里添加了一条注释，这里将会回显相同的内容：考虑到内容被浮动，基于百分比的宽度会从层次结构中最后一个具有硬宽度的父元素计算，如果没有硬宽度，则从其固有宽度计算？如果您为＃contentholder赋予px / pt / cm的硬宽度或在内容的动态宽度分配中替代使用其中一种单位，会发生什么？ - prodigitalson