强制调整窗口大小以触发

Question

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?

UPDATE:

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

Answer 1

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

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

Answer 2

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

Answer 3

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

$(window).resize();

Answer 4

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

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.

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:

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

Answer 5

Following is the working solution:

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

Answer 6

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?