Javascript 如何在浏览器调整大小时刷新屏幕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5836779/
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
How can I refresh the screen on browser resize?
提问by santa
Is it possible to refresh a page on browser size change? I use some styles that create areas on a page and if the browser is scaled down the layout break.
是否可以在浏览器大小更改时刷新页面？我使用一些在页面上创建区域的样式，如果浏览器按比例缩小，则布局中断。
Perhaps I can detect the document size change with jQuery?
也许我可以用 jQuery 检测文档大小的变化？
回答by JR Smith
Update for anyone viewing this now. JQuery now considers bind a deprecated function.
为现在查看此内容的任何人更新。JQuery 现在认为 bind 是一个不推荐使用的函数。
And the way proximus' response works (at least in Opera/Chrome/Firefox) it constantly polls for resizing even if the browser is just sitting there. It appears that the resize function was called automatically when it hit location.reload(), causing it to hit an infinite loop. Here's what I pulled together that also solved the problem.
而且 proximus 的响应方式（至少在 Opera/Chrome/Firefox 中）它会不断轮询调整大小，即使浏览器只是坐在那里。看起来 resize 函数在点击 location.reload() 时被自动调用，导致它进入无限循环。这是我整理的也解决了问题的内容。
jQuery(function($){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(window).resize(function() {
if(windowWidth != $(window).width() || windowHeight != $(window).height()) {
location.reload();
return;
}
});
});
回答by uKolka
Here's a pure JS solution, because I think it's not fair to use jQuery for everything.
这是一个纯 JS 解决方案，因为我认为将 jQuery 用于所有事情是不公平的。
window.addEventListener('resize', function () {
"use strict";
window.location.reload();
});
A drawback is that it won't work in IE "browser" older than 9.
一个缺点是它不能在 9 岁以上的 IE“浏览器”中工作。
回答by proximus
If you're looking for a jQuery solution, you can use something like this:
如果您正在寻找 jQuery 解决方案，您可以使用以下内容：
$(window).bind('resize', function() {
location.reload();
});
Maybe it makes sense to additionally use a timeout...
也许另外使用超时是有意义的......
回答by aWebDeveloper
Simple. This doesn't fire multiple events just one event every x second(s). The accepted answer will throw too many events
简单的。这不会每 x 秒触发一个事件，而是触发多个事件。接受的答案将引发太多事件
var resizeTimeout;
window.addEventListener('resize', function(event) {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(){
window.location.reload();
}, 1500);
});
for jQuery replace window.addEventListener('resize'with $(window).resize
对于 jQuery 替换window.addEventListener('resize'为$(window).resize
回答by Luke
$(window).resize( function() {
window.location.href = window.location.href;
});
This one worked for me!
这个对我有用！
回答by Dampas
There is a problem if someone drag window to resize - there would be too many resize events.
如果有人拖动窗口来调整大小会出现问题 - 会有太多的调整大小事件。
It is better to use timer, to clean that up:
最好使用计时器来清理它：
$(window).on('resize', function () {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function () {
location.reload();
}, 500);
});
回答by DA.
There is an onresize event you can listen for:
您可以监听一个 onresize 事件：
回答by Sakata Gintoki
Just use this code
只需使用此代码
$(window).resize( function() {
window.location.href = window.location.href;
});
Hope it useful
希望有用
