Question

我想在当前窗口的大小改变后执行一个函数。

我有这个非常简单的代码：（foo.html）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  </body>
    <script>
      function resize() {alert("FOO");}
      window.onresize = resize;
    </script>
</html>

在Firefox Quantum v60.4（Desktop）上，此代码就像一个超级按钮。当我调整firefox窗口的大小时，将显示警报。而且，当我仅加载页面“ foo.html”时，不会显示警报“ FOO”。

但是：

在Chrome v71.0.3578（台式机）上，当我调整窗口大小时，警报会出现两次。
最糟糕的是，在我的Android智能手机（使用Firefox v67.0.2）上，当我加载页面时（我不调整页面大小，只需加载）就会显示警报

在我调整窗口大小或从智能手机上的肖像模式转到风景模式时，这里是否只能处理一次调整窗口事件？

感谢帮助！

编辑：

使用此代码，我可以防止Chrome两次启动：

var resizeTimer;
window.onresize = function(){
    if (resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function(){
        alert("FOO");
    }, 50);
};

但是在Firefox（Android）上，我仍然遇到同样的问题。加载页面时显示警报“ FOO”。（在智能手机上，我只想在用户从纵向模式转到横向模式时才执行代码）

Answer 1

为什么不这样呢？

var CurrentWindowSize = {  w: document.body.clientWidth,  h: document.body.clientHeight }; // only Chrome has correct values here

window.onresize = function(e)
{
  let width  = e.target.outerWidth
  ,   height = e.target.outerHeight
  ;
  if (width != CurrentWindowSize.w
  || height != CurrentWindowSize.h)
  {
    CurrentWindowSize.w = width;
    CurrentWindowSize.h = height;
    WindowIsResized();
  }
}

function WindowIsResized() {
  // your stuff...
}

Javascript，仅用于处理大小调整事件的跨平台方法

1 个答案: