Javascript 如何在不使用“窗口打开”的情况下关闭选项卡

Javascript 如何在不使用“窗口打开”的情况下关闭选项卡,javascript,html,google-chrome,chromium,service-worker,Javascript,Html,Google Chrome,Chromium,Service Worker,我使用以下命令打开带有一些页面内容的新选项卡(在新流程中) 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.cli

我使用以下命令打开带有一些页面内容的新选项卡(在新流程中)

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();

当您使用此代码时,它总是打开新选项卡, 我希望当你调用这段代码时,它会看到它是否是在新选项卡中打开的前一个调用,然后它会关闭它,新调用将在新选项卡中打开。 或者在上一个选项卡中运行新页面而不关闭它

我无法使用常规窗口。如果您可以控制所有涉及的页面,则可以使用open API…

描述如何实现进入每个页面并提供在这些页面之间广播消息的方法的服务工作者

服务人员无权访问DOM。相反,您可以安排将消息传递给特定的客户机(页面),然后该客户机根据该消息执行自己的DOM操作

无论采用哪种解决方案,请记住页面都是为了安全而进行沙盒处理的,因此需要某种自愿协议才能进行交互。如果不是这样的话,比如,当你将一个页面/选项卡输入另一个页面/选项卡时,它将特别容易劫持你的密码。

你需要的是一个(不是服务人员,不同的东西)。之前链接的MDN页面中有一个完整的示例

然而,根据caniuse.com的说法,在协调类似这样的小任务方面,兼容性是一个更好的选择。对于您的具体情况,在
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>
<p>This page is in another process.</p>
<script>
window.addEventListener('storage', event => {
  if (event.key === 'close') { window.close(); }
});
</script>

希望有帮助

使用与我的回答相同的技巧。但是,只需调用window.close(),而不是在主窗口中更改dom的名称;

这样做,您可能根本无法访问新打开的选项卡,这就是为什么
窗口。通常首选“打开”
。如果两个页面都在同一个域中提供服务,则可以选择“服务人员”。如果您的服务器具有后端技术,您可以将内容发送到服务器,并让新选项卡每3秒发出一次更改请求,或使用websocketconnection@Andrews-谢谢,但我没有服务器端,我们的impl是纯js客户端,那么我可以使用service worker吗?如果是,你能提供一些例子吗?@adeneo-那么你认为100%没有办法/诀窍/解决方法来实现这一点吗?很抱歉,我们无法使用windwo.open…有趣的问题,值得尝试,非常感谢您1+!你能举例说明我如何与我的两个页面(我放了一些简单的页面参考)进行交互,比如更改段落内容或其他…@johnjerby这看起来是一个有趣的项目,但遗憾的是,需要比我目前可用的更多的开发和调试时间。我上面链接的文章提供了服务工作者实例之间通信的示例。提供服务工作者实例与其所附加到的页面之间的通信示例。我相信,在两者之间,这足以让你们继续发展。如果您遇到问题,当然可以发布另一个问题。谢谢slava,我假设我需要使用shard worker(这就是我放置此标记的原因,Ourobrus也说过,但不确定如何在我的上下文中使用它…示例将非常有帮助!谢谢,但我需要父级(在您的示例index.html中)将关闭子页面,您能给出一些如何模拟它的提示吗?在子页面中注册一个函数,并在父页面中调用远程函数。