javascript - 该网站如何在没有任何权限的情况下控制用户在选项卡之间的导航？

Question

当在 Outlook web app 上时, 单击“日历”链接将在新选项卡中打开。到目前为止一切正常。

有趣的部分发生在单击这个新选项卡上的“邮件”选项卡时；它以某种方式将焦点重定向到原始选项卡!这两个选项卡现在“绑定(bind)”了，单击每个选项卡中的邮件/日历会使另一个选项卡成为焦点。

我假设这是通过一些 JavaScript 魔法完成的。有趣的是，重新打开其中一个选项卡会失去这种“绑定(bind)”状态，因此我假设它与新选项卡的打开方式有关。我确实尝试研究了选项卡如何由网站控制，但所有结果都表明这是不可能的。

如果没有视频/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();    

这是一个 fiddle 示例(确保您允许弹出窗口):https://jsfiddle.net/pg74mxvd/

如果您运行 fiddle，您会看到它会打开一个新选项卡。然后您可以返回到 fiddle 选项卡并单击 HTML 按钮，焦点应该会转到刚刚打开的选项卡。

我怀疑这就是他们正在做的事情，因为当您单击“日历”按钮时，您实际上是从现有窗口打开一个新窗口，然后您可以调用上述方法。