Как определить фокус браузера на мобильных устройствах?

Question

Приложение, которое я разрабатываю, построено вокруг jQuery Mobile и некоторых Ajax для обновления частей страницы. Как и сайты, использующие автоматическое обновление, я хочу остановить обновление после некоторого условия (время/видимость/и т. Д.), Поэтому мой сервер не обманывается ненужными запросами. Приложение имеет экран состояния, который обычно проверяется пользователем, и, в идеале, мои скрипты будут знать, что окно браузера сосредоточилось, и было бы подходящим временем для обновления. Я делал это раньше в настольном WebApps, но я заметил много вариаций на подвижную части между различными платформами и браузерами, например:

• window.onfocus() делает/не срабатывает, когда выгоды браузера фокус
• window.onfocus() не/не срабатывают, когда вкладки переключаются в браузере
• Javascript является/не подвешен между закладками переключателями и/или переключателями от браузера

Лучшее, что я смог сделать до сих пор, - это набор эвристик, которые смотрят на доступные события +, когда был связанное с пользователем, но оно неудобно и приводит к тому, что пользователь перескакивает назад на страницу и должен обновляться вручную. Не хорошо.

Любые умные приемы для решения этой проблемы?

Answer 1

Если вы просто хотите знать, что окно браузера было не в фокусе, используйте функцию requestAnimationFrame.

window.requestAnimFrame = window.requestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          <add browsers here> 

Затем в коде

var lastupdate = new Date() 
(function loop() { 
     var now = new Date(); 

     if (now - lastupdate > <some treshold like 1 second>) { 
      // browser was suspended and did come back to focus 
     } 
     lastupdate = now; 

     window.requestAnimFrame(loop); 
})(); 

Трюк в том, что браузеры не дают кадр анимации, если вкладка или окно находится вне фокуса. Обычные setInterval и setTimeouts будут по-прежнему работать. Этот цикл будет работать непрерывно, когда окно находится в фокусе, но накладные расходы минимальны, это называется 3-5 раз в секунду в мобильных устройствах.