一个 JavaScript 问题。
有谁知道为什么在某些浏览器中 window.onresize 在页面加载时被调用？
这可以避免吗？
我在 IE、Firefox 27 for Android mobile(在 Samsung Galaxy S3 上测试)、Google Nexus 7(在 Browserstack 上测试)和 Windows Phone 8(Internet Explorer)中发现了这个问题。
我的测试页面是这样的:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript">
window.onresize = resize;
function resize(){
alert("resize event detected!");
}
</script>
</head>
<body>
</body>
</html>
解决方案:
var windowWidth = $(window).width();
window.onresize = resize;
function resize(){
if($(window).width()!=windowWidth){
alert("Bingo");
windowWidth = $(window).width();
}
}
最佳答案
据我所知，window.onresize 默认情况下不会在页面加载时被调用在桌面浏览器上
我写了一个简单的html页面如下(很多H1让页面有一些内容):
<!DOCTYPE html>
<html>
<head>
<script>
var i = 0;
window.onresize = function() {
i++;
}
window.setTimeout(function() {
alert("resize called " + i + " times");
}, 2000);
</script>
</head>
<body>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</body>
</html>
警告在以下浏览器中显示 0:
- Chrome 32
- 火狐 26
- 歌剧 12
- IE11
- IE8
- Safari 5.1.7
移动浏览器视口(viewport)理论
我可以看出您的问题似乎出在移动设备上。 onresize 可能会在页面加载时触发，因为在移动浏览器加载内容并确定如何将页面缩放到您的屏幕尺寸后，“视觉视口(viewport)” 会调整大小。
有关移动视口(viewport)的说明，请参见此处:
http://www.quirksmode.org/mobile/viewports2.html
并查看此处的表格，了解几种移动浏览器如何处理视觉视口(viewport)的 onresize 事件:
http://www.quirksmode.org/dom/events/resize_mobile.html
如果是这种情况，那么我认为您可能很难与之抗争。
忽略对 onresize 的第一次调用
要避免第一次运行 onresize 的事件处理程序，您可以简单地设置一个标志，如下所示:
var initial = true;
$(window).on('resize',function(){
if(!initial)
{
// do your stuff here
}else
{
// don't do your stuff here
}
initial = false;
});
但是，正如您在评论中所说，如果 onresize 按预期工作(而不是在页面加载时运行)，这将不起作用。它假定第一次运行将在页面加载时进行。
关于javascript - 为什么在加载页面时会调用 window.onresize？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21832748/