Сдетектить переключение вкладки

122

16 января 2020, 17:40

Необходимо в приложении отключать звук, если вкладка неактивна. Не получается найти кроссбраузерный способ.

Пробовал использовать события onfocus и onblur:

window.addEventListener('focus', (e) => this.audioPlayer.onFocus(), false);
window.addEventListener('blur', (e) => this.audioPlayer.onBlur(), false);

На ПК это исправно работает, но на Android/IOS не работает вообще. Что посоветуете?

Answer 1

Мне удалось найти ответ у наших англоязычных коллег - Is there a way to detect if a browser window is not currently active ( автор ответа @DanielBuckmaster )

Это функция, которая определяет какие именно события поддерживаются браузером (с какими вендорными префиксами) и вызывает callback при изменении visibility.

module.exports = (callback) => {
  let visible = true;
  if (!callback) {
    throw new Error('onVisibilityChange no callback given');
  }
  function focused() {
    if (!visible) {
      callback(visible = true);
    }
  }
  function unfocused() {
    if (visible) {
      callback(visible = false);
    }
  }
  // Standards:
  if ('hidden' in document) {
    document.addEventListener('visibilitychange',
        function() {(document.hidden ? unfocused : focused)()});
  } else if ('mozHidden' in document) {
    document.addEventListener('mozvisibilitychange',
        function() {(document.mozHidden ? unfocused : focused)()});
  } else if ('webkitHidden' in document) {
    document.addEventListener('webkitvisibilitychange',
        function() {(document.webkitHidden ? unfocused : focused)()});
  } else if ('msHidden' in document) {
    document.addEventListener('msvisibilitychange',
        function() {(document.msHidden ? unfocused : focused)()});
  } else if ('onfocusin' in document) {
    // IE 9 and lower:
    document.onfocusin = focused;
    document.onfocusout = unfocused;
  } else {
    // All others:
    window.onpageshow = window.onfocus = focused;
    window.onpagehide = window.onblur = unfocused;
  }
};

Вызывается так:

const onVisibilityChange = require('./Helpers/onVisibilityChange');
onVisibilityChange((isVisible) => {
    if(isVisible){
        // Приложение в фокусе
    } else {
        // Приложение НЕ в фокусе
    }
});

Данное решение я лично протестил на: