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

Question

[Дмитрий Тарасов]

Никак не могу проверить находится ли пользователь на новой открытой вкладке ?

Делаю так

newWindow = window.open('https://google.com', '_blank', 'status=0,menubar=0,toolbar=0,resizable=1,scrollbars=1,height=' + 750 + ',width=' + 1000 + ',left=' + (screen.width / 2 - 1000 / 2) + ',top=' + (screen.height / 2 - 750 / 2);
newWindow.onblur = function() { hasFocus = false; console.log('focus: false'); };

newWindow.onfocus = function() {
    hasFocus = true;
    console.log('focus: true');
 };

Answer 1

[Сергей Соколов]

Есть Page Visibility API (на англ.)

Оттуда пример кода, который приостанавливает воспроизведение видео, если таб стал неактивным:

spoiler

// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
 
var videoElement = document.getElementById("videoElement");

// If the page is hidden, pause the video;
// if the page is shown, play the video
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // Handle page visibility change   
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
    
  // When the video pauses, set the title.
  // This shows the paused
  videoElement.addEventListener("pause", function(){
    document.title = 'Paused';
  }, false);
    
  // When the video plays, set the title.
  videoElement.addEventListener("play", function(){
    document.title = 'Playing'; 
  }, false);

}

Comments

[Дмитрий Тарасов]

А если я пытаюсь не свой сайт проверить ? типа гугл, будет работать ?

[Сергей Соколов]

Дмитрий Тарасов, из браузерного расширения?

[Дмитрий Тарасов]

Сергей Соколов, из браузерного расширения что угодно можно, нет из контекста сайта site.com я открываю сайт vk.com и могу ли я проверить c сайта site.com активна ли в данный момент открытая вкладка vk.com ?

[Сергей Соколов]

Дмитрий Тарасов, нет, конечно. Иначе бы вы открыли со своего сайта окно с интернет-банком, клиент залогинился, а ваш чудо-скрипт обогатил вас ) Same-Origin Policy это вам не хухры-мухры.

Открывая программно новое окно, вы в своем скрипте получаете ссылку на объект window открытого окна. Но до document уже не дотянуться, вроде бы. Проверьте?

var newWindow  =window.open('https://google/com');
setTimeout(() => {
  console.log("title:", newWindow.document.title);
  console.log("hidden:", newWindow.document.hidden);
}, 1000);

Только это надо вызывать по событию клика, иначе не откроет новое окно.

[Дмитрий Тарасов]

Сергей Соколов, Blocked a frame with origin "https://site.com" from accessing a cross-origin frame.

крч, я понял, спасибо.

[Сергей Соколов]

Дмитрий Тарасов, пилите очередное «для получения пиратского контента посмотрите сто сайтов наших рекламодателей» ? =)

[Дмитрий Тарасов]

Сергей Соколов, нет, просмотр сайтов за деньги))

[Сергей Соколов]

Дмитрий Тарасов, на исходный вопрос «Как проверить, находится ли пользователь на открытой вкладке?» ответ исчерпывающий? Тогда кнопка «Отметить решением» – может, кому-то ещё пригодится.

Answer 2

[Евгений]

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