如何在不使用打开窗口的情况下关闭选项卡答案

【问题标题】：How to close tab without using window open如何在不使用打开窗口的情况下关闭选项卡
【发布时间】：2017-03-04 18:33:36
【问题描述】：

我使用以下内容打开包含一些页面内容的新标签（在新进程中），

var p = document.getElementById("myElement"); 
var a = document.createElement('a');
a.setAttribute('href',".../mypage.html");
a.setAttribute('rel',"noreferrer");
a.setAttribute('target',"_blank");
p.appendChild(a);
a.click();

http://news.softpedia.com/news/Force-Google-Chrome-to-Open-Links-in-New-Processes-128962.shtml

当您使用此代码时，它总是会打开新标签页，我希望当您调用此代码时，它会查看它是否是在新选项卡中打开的先前调用，然后它将关闭它并且新调用将在新选项卡中打开。 或者可能在不关闭的情况下在前一个选项卡中运行新页面。

我无法使用常规的 window.open API ...

【问题讨论】：

那样做，你可能根本无法访问新打开的标签页，这就是为什么window.open 通常是首选的原因。
服务工作者可以是一个选项，因为这两个页面都在同一个域中提供。如果您的服务器有后端技术，您可以将内容发送到服务器，并让新标签每 3 秒发出一次请求以进行更改或使用 websocket 连接
@Andrews - 谢谢，但我没有服务器端，我们的 impl 是纯 js 客户端，那我可以使用 service worker 吗？如果可以，你能举个例子吗？
@adeneo - 所以你认为 100% 没有办法/技巧/解决方法来实现这一目标？对不起，我们不能使用 windwo.open ...
有趣的问题值得一试Service Workers

标签： javascript html google-chrome chromium service-worker

【解决方案1】：

您需要的是 SharedWorker（不是 Service Worker，不同的东西）。您在之前链接的 MDN 页面中有一个完整的示例。

尽管如此，根据 caniuse.com 的说法，localStorage 在协调此类小型任务的兼容性方面是一个更好的选择。对于您的具体情况，在index.html：

<a href="example.html" rel="noreferrer" target="_blank">Open in another process</a>
<button>Close</button>
<script>
document.querySelector('button').onclick = () => {
  // Change the value if you want the storage event to be triggered.
  localStorage.setItem('close', Date.now());
};
</script>

现在在example.html：

<p>This page is in another process.</p>
<script>
window.addEventListener('storage', event => {
  if (event.key === 'close') { window.close(); }
});
</script>

希望对你有帮助！

【讨论】：

谢谢 slava ，我假设我需要使用 shard worker （这就是我放置这个标签的原因，而且 ouroborus 也说过，但不确定如何在我的上下文中使用它......示例将非常有帮助！

【解决方案2】：

使用与我的回答 here 相同的技术。但是不要更改主窗口中的 dom，只需调用 window.close(); Example

【讨论】：

谢谢，但我需要父（在您的示例 index.html 中）将关闭子页面，您能否给出一些提示如何模拟它？
在child中注册一个函数，在parent中调用远程函数。

【解决方案3】：

Service workers 是可能的，如果您可以控制所有涉及的页面。

How to Send Messages Between Service Workers and Clients 描述了如何实现一个进入每个页面的服务工作者，并提供一种在这些页面之间广播消息的方法。

Service Worker 无权访问 DOM。相反，您可以安排将消息传递给特定客户端（页面），然后该客户端根据该消息执行其自己的 DOM 操作。

无论采用何种解决方案，请记住，出于安全考虑，页面已被沙盒化，因此需要某种自愿协议才能进行交互。如果不是这样，例如，当您将密码输入另一个页面/标签时，一个页面/标签会劫持您的密码。

【讨论】：

非常感谢 1+ ！您能否提供示例如何与我的两个页面进行交互（我放了一些简单的页面参考），例如更改段落内容或其他内容...
@JohnJerrby 这看起来是一个有趣的项目，但遗憾的是，它需要比我目前可用的更多的开发和调试时间。我上面链接的文章提供了在服务工作者实例之间进行通信的示例。 This article 提供了服务工作者实例和它所附加到的页面之间的通信示例。我相信，在两者之间，这足以让你继续开发。如果您遇到问题，当然可以发布另一个问题。