Javascript, кросс-платформенный способ изменения размера дескриптора ТОЛЬКО событие происходит - PullRequest
0 голосов
/ 16 июня 2019

Я хочу выполнить функцию, когда размер текущих окон изменился.

У меня есть очень простой код: (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 (Desktop), когда я изменяю размер окна, предупреждение появляется дважды.

  • Хуже всего, на моем смартфоне Android (с Firefox v67.0.2) появляется предупреждение, когда я загружаю страницу (я не изменяю размер страницы, просто загружаю)

Есть ли способ обрабатывать событие изменения размера окна ТОЛЬКО ОДИН РАЗ, когда я изменяю размеры окон или перехожу из портретного в ландшафтный режим на смартфоне?

Спасибо за помощь!

РЕДАКТИРОВАТЬ:

С помощью этого кода я могу предотвратить двойной запуск Chrome:

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

Но в Firefox (Android) у меня осталась та же проблема. При загрузке страницы отображается предупреждение «FOO». (На смартфоне я хочу выполнять свой код только тогда, когда пользователь переходит из портретного режима в ландшафтный режим)

1 Ответ

1 голос
/ 16 июня 2019

А почему бы не иметь что-то подобное?

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...
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...