该网站如何在没有任何权限的情况下控制用户在标签之间的导航？

Question

在Outlook web app上，单击“日历”链接会在新标签页中打开。到目前为止，一切正常。

单击此新选项卡上的“邮件”选项卡会发生有趣的部分；它将焦点重新定向到原始选项卡！现在，这两个选项卡已“绑定”，单击每个选项卡中的邮件/日历可使另一个选项卡突出显示。

我假设这是通过一些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);