Question

JavaScript问题。

有人知道为什么在页面加载时会调用某些浏览器window.onresize吗？

这可以避免吗？

我发现了IE中的问题，Android 27的Firefox 27（三星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();
   }

}

Answer 1

据我所知，window.onresize默认情况下不会在页面加载时调用在桌面浏览器上

我写了一个简单的html页面如下（许多H1 s使页面有一些内容）：

<!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
Firefox 26
Opera 12
IE11
IE8
Safari 5.1.7

移动浏览器视口理论

我可以看到您的问题似乎出现在移动设备上。由于“可视化视口”在移动浏览器加载内容后调整大小并计算出如何将页面缩放到您的屏幕大小，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按预期工作（并且未在页面加载时运行），则无效。它假定第一次运行将在页面加载。

Answer 2

我在Chrome 36 for Android上遇到了同样的问题。当我没想到会发生这种情况时，在第一页加载的某个时刻触发了resize事件（它会在页面渲染时引起一些轻微的视觉故障）。在调查之后，我试图删除我的JavaScript部分，它在document.ready事件被触发之后动态附加了meta name =“viewport”标记信息（我使用了jQuery）并且没有更多危险的调用resize事件。

一种解释可能是在页面已经开始渲染之后附加视口信息将导致调整大小事件（这确实有意义）。

当然，只有考虑到meta name =“viewport”标签信息的浏览器才会出现这种情况，主要是移动浏览器（我没有在8.1上测试IE11，但考虑到它是一个混合操作系统，它可能会考虑到meta name =“viewport”标签信息）。

Answer 3

我遇到的问题是，有时会在加载页面后触发多个调整大小事件。为了确保只考虑真正的resize事件，我使用了一个计时器来忽略页面加载后前500ms的事件。这样，它可以在所有浏览器中使用，无论它们在加载后是否触发一个或多个调整大小事件。

var realResize = false;

setTimeout(function() {
  realResize = true;
}, 500);

window.onresize = function() {
  if (realResize) {
    // do something
  }
};

为什么在加载页面时会调用window.onresize？

3 个答案:

移动浏览器视口理论

忽略对`onresize`

为什么在加载页面时会调用window.onresize？

3 个答案:

移动浏览器视口理论

忽略对onresize

忽略对`onresize`