Как этот веб-сайт контролирует навигацию пользователя между вкладками без каких-либо разрешений?

Question

В веб-приложении Outlook при нажатии ссылки «Календарь» открывается новая вкладка.Пока все нормально.

Интересная часть происходит при нажатии на вкладку «Почта» на этой новой вкладке;это как-то перенаправляет фокус на исходную вкладку!Две вкладки теперь «связаны», и нажатие кнопки «Почта / календарь» на каждой вкладке приводит к фокусировке на другой вкладке.

Я предполагаю, что это делается с помощью некоторого JavaScript-мастера.Интересно, что повторное открытие одной из вкладок теряет этот «связанный» статус, поэтому я предполагаю, что это связано с тем, как открывается новая вкладка.Я действительно пытался исследовать, как вкладки могут контролироваться веб-сайтом, но все результаты означали, что это невозможно.

Трудно полностью объяснить поведение без видео / gif, но мой вопрос по сути:

Как веб-сайт может управлять навигацией между вкладками в браузере?

Я использую Chrome x64 71.0.3578.98.

Answer 1

Если окно открывает другое окно, вы можете переключать фокус между ними, используя:

// Open new window from current window
let yourTabName = window.open("google.com");

// Focus parent window, from new window
window.opener.focus();

// Focus new window, from parent window
yourTabName.focus();    

Вот примерная скрипка (убедитесь, что вы разрешаете всплывающие окна): https://jsfiddle.net/pg74mxvd/

Если вы запустите скрипку, вы увидите, что она открывает новую вкладку.Затем вы можете вернуться на вкладку скрипки и нажать кнопку HTML, и фокус должен перейти на только что открытую вкладку.

Я подозреваю, что это то, что они делают, так как при нажатии кнопки «Календарь» выпо сути, открываем новое окно из существующего, что позволит вам вызвать вышеупомянутые методы.

Answer 2

Существует множество методов для этого, основанных на том факте, что все вкладки являются частью одного и того же домена (outlook.com), поэтому браузер разрешает некоторые виды связи между ними.Вот простой механизм с использованием опроса window.localStorage:

 onUserClickCalendar(() => {
      window.localStorage.setItem('focus', 'calendar');
 });

 function checkForTabFocusUpdate() {
      const focus = windows.localStorage.getItem('focus');
      if (focus !== currentFocus) {
         switchTabFocus(focus);
      }
 }

 setInterval(checkForTabFocusUpdate, 100);