Hap*_*976 9 javascript window-resize
一个JavaScript问题.
有人知道为什么在window.onresize页面加载时会在某些浏览器中调用它吗？
这可以避免吗？
我发现了IE中的问题,Android 27的Firefox 27(三星Galaxy S3上测试),Google Nexus 7(浏览Browserstack)和Windows Phone 8(Internet Explorer).
我的testpage看起来像这样:
<!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页面如下（很多H1s让页面有一些内容）：
<!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：
我可以看到您的问题似乎出在移动设备上。onresize可能会在页面加载时触发，因为在移动浏览器加载内容并弄清楚如何将页面缩放到屏幕尺寸后，“视觉视口”会调整大小。
有关移动视口的说明，请参阅此处：
http://www.quirksmode.org/mobile/viewports2.html
请参阅此处的表格，了解几种移动浏览器如何处理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但是，正如您在评论中所说，如果按预期工作（并且不在页面加载时运行），这将不起作用。它假设第一次运行将在页面加载时进行。
| 归档时间： |
|
| 查看次数： |
7146 次 |
| 最近记录： |