如何在浏览器窗口中关闭当前标签页?

597
我希望在网页上创建一个链接,点击该链接可以关闭浏览器中当前激活的标签页而不关闭其他标签页。当用户单击关闭链接时,应出现一个警告消息,提示用户确认是否关闭,提供两个按钮,“是”和“否”。如果用户单击“是”,则关闭该页面;如果单击“否”,则不执行任何操作。
如何实现?有什么建议吗?

2
我可能来晚了,但浏览器有其防止的原因。<br><br> 想象一下你一遍又一遍地试图关闭一个窗口,但它不会关闭,因为它正在执行你问题中的“如果没有”的部分,即“什么也不做”。<br><br> 这肯定会让人恼火! - Muhammad Osama
不可能的。请阅读此内容:https://dev59.com/2WIj5IYBdhLWcg3w6JHU#19768082 - iamandrewluca
对于任何试图以编程方式关闭选项卡的人,我有两件事要补充(TL:DR;) 1 您只能关闭使用JavaScript打开的选项卡(如Ryan Joy所提到的)。 2,这里没有提到:只有当window.top.opener(“父”窗口)不为null时,您才能关闭选项卡。 - Nico
windows.close()在Angular中无法正常工作。它会给我一个警告:脚本只能关闭由它们打开的窗口。 - Margi212
您想关闭的页面,请粘贴以下代码:<a href="JavaScript.windows.close()"> 关闭</a>。 - Omid Shagiwal
23个回答

8

已在FF 18和Chrome 24中进行成功测试:

头部插入:

<script>
    function closeWindow() {
        window.open('','_parent','');
        window.close();
    }
</script> 

HTML:

<a href="javascript:closeWindow();">Close Window</a>

感谢Marcos J. Drake


4
不在谷歌浏览器上工作:“脚本只能关闭由其打开的窗口。” - César León

7
<button class="closeButton" style="cursor: pointer" onclick="window.close();">Close Window</button>

这对我很有效。

在我们的React项目中无法工作,可能是因为我们使用了jsx而不是纯html和javascript。我们遇到了与其他人相同的错误:脚本只能关闭由它们打开的窗口。 - nickcin
我发现在Chrome中,它可以在本地文件上工作(至少是这样),当标签页不是通过将URL粘贴到浏览器栏中首次打开时。因此,它必须通过双击、从VSCode或其他任何方式打开,但只有当我通过Ctrl-T打开一个新标签并粘贴URL时,才会出现黄色警告并且无法工作。 - Vasily Hall

4

有点晚了,但这就是我找到的...

window.close() 只有在使用 window.open() 方法打开窗口时才能正常工作(IE 是个例外)。

!(请参见下面 @killstreet 的评论,关于带有 target _blank 的锚标签)

TLDR:Chrome 和 Firefox 允许关闭它们。

你将会得到控制台错误: Scripts may not close windows that were not opened by script. 作为一个错误,除此之外什么也不会发生。

你可以在 URL 中添加一个唯一的参数来知道页面是否是由脚本打开的(如时间)- 但这只是一个 hack,而不是本地功能,并且在某些情况下会失败。

我找不到任何方法来确定页面是否是从 open() 打开的, 并且 close 不会抛出任何错误。 这将不会输出 "test":

try{
  window.close();
}
catch (e){
  console.log("text");
}

你可以阅读MDN中关于close()函数的更多内容

2
不仅是通过脚本打开的选项卡,还允许关闭带有目标_blank的锚点标签。到目前为止在Chrome和Firefox中测试,两者似乎都允许关闭通过锚点打开的选项卡。 - killstreet

4
我想补充一下,window.close()在2021年的Chrome 91中有效,但并非总是如此。其中一个情况是,如果标签页中没有历史记录(您无法返回),则它可以正常工作。
在我的情况下,我想创建一个自毁的选项卡,在几秒钟后关闭,但我苦于如何前往开发服务器而避免新选项卡,因为显然新选项卡也是选项卡,并且会保存在选项卡历史记录中:D 我在about:blank选项卡中创建了一个带有target=_blank属性的链接,它导致新选项卡中的window.close()方法最终起作用!

4

保证在未来的任何浏览器中都不允许关闭选项卡。使用像上面提到的脚本将不起作用。

我的解决方案是使用 Chrome扩展程序。Chrome扩展程序可以要求选项卡操作权限,因此轻松处理扩展内容脚本所在域中的任何选项卡关闭。

以下是背景脚本的样例:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    console.log(sender)
    console.log(message)
    if(message.closeThis) {
        closeTab(sender.tab.id)
    }
});

const closeTab = id => {
    console.log("Closing tab");
    chrome.tabs.remove(id);
}

内容脚本应该如下所示:

window.addEventListener("message", (event) => {
    // Only accept messages from ourselves
    if (event.source !== window)
        return;

    if (event.data.type && (event.data.type === "APPLICATION/CLOSE")) {
        console.log("Content script received APPLICATION/CLOSE event");
        chrome.runtime.sendMessage({closeThis: true});
    }
}, false);

调用这个函数可以在应用程序中关闭标签页(确保在清单文件中指定域名并启用内容脚本):

window.postMessage({ type: "APPLICATION/CLOSE" }, "*");

使用此功能时应谨慎,因为Chrome扩展程序的部署可能比较麻烦。


2
这是Chrome唯一可靠的选项。 - Georg
如果这是唯一可行的选择,那么在新标签页中打开并在分享后关闭的Facebook分享链接将无法正常工作 - 但实际上它们可以在所有浏览器中正常运行,据我所知。 - Bruce

2
这确实是可能的,而且非常简单:
  window.opener = self
  window.close()

(为了简洁起见,省略了确认/取消对话框)

1

由于浏览器行为非常严格,window.close() 只有在通过 window.open(...) 打开的窗口中才能工作

但我已经有了一个解决方案

  1. 如果没有包含空的哈希标记,请使用 window.open(...) 添加一个空的哈希标记
  2. 在适当的关闭时间调用 window.close
  3. 如果步骤2返回错误,请将任何哈希标记或HTTP参数替换为空哈希标记,最后关闭窗口
<button onclick="myFunction()">Close</button>
<script>
if (location.href.indexOf("#") == -1) {
    window.open(location.href + "#", "_self")
}

function myFunction() {
  try {
    window.close()
  } catch (err) {
    window.open(location.href.substring(0, location.href.indexOf("?")).substring(0, location.href.indexOf("#")) + "#", "_self")
    window.close()
  }
}
</script>

此实时演示中输入close


奇怪的是,在你的演示网站上,这对我来说在火狐浏览器中运行良好,但在我的代码中使用时却不行。 - Chris Edwards
积极评价给出。 即使对我来说这个没有起作用。 最好的祝福 - Ramon Maldio
我不知道是什么让我的演示工作起来的 :/ - undefined
算了,现在不起作用了。也许是Chrome修复了它? - undefined

1

@VityaSchel为我添加了最重要的注释: https://dev59.com/xXI95IYBdhLWcg3w8y6N#68035933

只想补充一点,window.close()在2021年的Chrome 91中可以使用,但并非总是有效。其中一个情况是当标签页中没有历史记录时(无法返回)。

在2023年,这种行为也存在于Firefox和Edge中。调用window.close()的新标签页确实会关闭自己,前提是它们没有任何页面历史记录。




这本来可以是一条评论,但我的声望还不够高。


这并没有回答问题。一旦您拥有足够的声望,您将能够评论任何帖子;相反,提供不需要询问者澄清的答案。- 来自审核 - borchvm
1
幸运的是,我可以回复您的评论,即使没有足够的声望,因为这是我的答案。这确实回答了问题。它添加了在此主题中缺失的信息。尽管在我看来它可以作为一个独立的答案,但正如所述,我更希望它成为另一个答案的评论。还有什么我应该做的吗?等待足够的声望再回来吗?如果您是stackoverflow团队的一员,您应该重新考虑是否真的要完全阻止新用户向现有答案添加信息。也许由答案的原作者进行审核就足够了。 - Schlagmichdoch

1

适用于Chrome版本111.0.xxxx.xxx

open(location, '_self').close();

0
你可以尝试使用JavaScript + HTML来欺骗浏览器关闭当前窗口的解决方案:
function closeWindow() {
 if(window.confirm('Are you sure?')) {
  window.alert('Closing window')
  window.open('', '_self')
  window.close()
 }
 else {
  alert('Cancelled!')
 }
}

HTML:

Some content
<button onclick='closeWindow()'>Close Current Window!</button>
More content

这太过复杂了 - 无论是在使用JS方面,还是不必要地将HTML引入其中。 - Bricky
这是帮助了我的答案! - Ernest Elikem

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接