我的布局出现问题,当我手动调整窗口大小并将其恢复到正常时,一切都处于完美的位置。
是否有可能欺骗浏览器并使用JavaScript做些什么,让浏览器认为页面已经被重新调整大小,以便我的布局看起来应该如此?
更新:
我能否调整窗口大小并恢复正常,以至于用户几乎不会注意到?
我的布局出现问题,当我手动调整窗口大小并将其恢复到正常时,一切都处于完美的位置。
是否有可能欺骗浏览器并使用JavaScript做些什么,让浏览器认为页面已经被重新调整大小,以便我的布局看起来应该如此?
更新:
我能否调整窗口大小并恢复正常,以至于用户几乎不会注意到?
此后,更好的解决方案已经发布在https://dev59.com/i3I-5IYBdhLWcg3whImk#18693617上:
window.dispatchEvent(new Event('resize'));
window.fireEvent()
在 IE 10 及以下版本也可以使用。 - Jason Godsonwindow.resizeTo(width, height);
如果你需要触发事件处理程序,你可以像这样做...
window.onresize();
window.onresize();
- Josh Stodolawindow.onresize()
对我无效:TypeError: Property 'onresize' of object [object global] is not a function
。 - fnkrwindow.onresize = function() {...};
$(document).ready( window.onresize() );
在JQuery 3和Firefox 55.0.3中运行良好。 - rask004resize()
方法,如下所示:$(window).resize();
这可以通过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!");
}
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);
}
var toDraw = document.getElementById('redrawme');
toDraw.style.display = none;
toDraw.style.display = '';
我不知道如果你尝试将整个body元素作为一个实体会得到什么结果,因为我以前从未尝试过。
你在做什么需要强制重绘吗?