Событие DOM, вызванное изменением размера окна

Question

У меня есть страница, которая имеет довольно сложный макет.Когда страница первоначально открывается, возникает проблема с выравниванием некоторых элементов.Однако эту проблему можно решить (навсегда), изменив размер окна браузера.

Очевидно, я не хочу, чтобы пользователю приходилось изменять размер окна браузера, чтобы страница отображалась правильно, поэтомуМне интересно, есть ли способ, которым я могу программно вызывать обработчики, присоединенные к событию изменения размера браузера, когда страница загружается впервые?прикрепленный к событию изменения размера окна:

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

Я убедился, что это действительно вызывает обработчики событий изменения размера окна, но когда я запускаю этот код в консоли Firebug, это не решает проблему с макетом.

Таким образом, кажется, что код, который фиксирует макет при изменении размера браузера, является не обработчиком события изменения размера окна, а обработчиком чего-то другого.Как я могу отследить, какой обработчик событий мне нужно запустить?

Возможно ли, что при изменении размера браузера вручную событие resize распространяется на все дочерние элементы окна, но когда приведенный выше кодвыполняется, обработчик изменения размера срабатывает только на самом окне?

Answer 1

Для совместимости с 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();

Answer 2

Я пробовал это в Chrome, Firefox и IE11, и это работает:

var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);

Answer 3

Я думаю, вы должны выяснить, почему страница не отображается правильно в первую очередь.Полагаться на повторный рендеринг после изменения размера кажется мне хакерским.

Хотя запуск события resize вручную может не дать правильных результатов, вы также можете попытаться скрыть / показать событие, вызывающее событие повторного рендеринга.,Это может привести к мерцанию экрана, поэтому это не оптимальное решение.

Answer 4

Может также быть сделано с CustomEvent :

var ev = new CustomEvent('resize'); //instantiate the resize event
ev.initEvent('resize');

window.dispatchEvent(ev); // fire 'resize' event!

Answer 5

Есть событие window.onresize, которое срабатывает при изменении размера окна.Вы можете принудительно изменить размер, изменив window.width или height на пиксель, а затем снова установив его на небольшой таймер.

С помощью jQuery вы можете сделать что-то вроде этого:FWIW, я видел это сам раньше, но я согласен с @bouke, что вы должны определенно пытаться определить, что вызывает сломанный макет.Я нахожу, что это обычно связано с плавающим содержимым или переполнением текстовых контейнеров, что вызывает такие проблемы.