我想在网页上创建一个链接,该链接将关闭浏览器中当前活动的选项卡,而不关闭浏览器中的其他选项卡。当用户单击关闭链接时,应该会出现一条警告消息,要求用户使用两个按钮进行确认,“YES”和“NO”。如果用户单击“是”,则关闭该页面,如果“否”,则不执行任何操作。
怎么做到呢?有什么建议么?
1
您只能关闭使用 javascript 打开的选项卡(如 Ryan Joy 所述)。 2
,此处未提及:只有当 window.top.opener
(“父”窗口)不为空时,您才能关闭标签。
您将需要 Javascript 来执行此操作。使用 window.close()
:
close();
注意:当前选项卡是隐含的。这是等价的:
window.close();
或者您可以指定不同的窗口。
所以:
function close_window() {
if (confirm("Close Window?")) {
close();
}
}
使用 HTML:
<a href="javascript:close_window();">close</a>
或者:
<a href="#" onclick="close_window();return false;">close</a>
您在此处return false
以防止事件的默认行为。否则,浏览器将尝试访问该 URL(显然不是)。
现在 window.confirm()
对话框上的选项将是 OK 和 Cancel(不是 Yes 和 No)。如果您真的想要Yes 和No,您需要创建某种模态Javascript 对话框。
注意:与上述内容存在特定于浏览器的差异。如果您使用 Javascript(通过 window.open()
)打开窗口,那么您可以使用 javascript 关闭窗口。 Firefox 不允许您关闭其他窗口。我相信IE会要求用户确认。其他浏览器可能会有所不同。
尝试这个
<a href="javascript:window.open('','_self').close();">close</a>
此方法适用于 Chrome 和 IE:
<a href="blablabla" onclick="setTimeout(function(){var ww = window.open(window.location, '_self'); ww.close(); }, 1000);">
If you click on this the window will be closed after 1000ms
</a>
open(location, '_self').close();
据我所知,在 Chrome 或 FireFox 中不再可能。在 IE(至少在 Edge 之前)中仍然可能。
<button type="button" onclick="window.open('', '_self', ''); window.close();">Discard</button>
See also this article
很抱歉发布了这个,但我最近实现了一个本地托管的站点,该站点需要能够关闭当前浏览器选项卡,并发现了一些有趣的解决方法,这些解决方法在我能找到的任何地方都没有很好的记录,所以我自己去做了。
注意:这些变通办法是在考虑本地托管站点的情况下完成的,并且(Edge 除外)需要专门配置浏览器,因此不适用于公共托管站点。
语境:
过去,jQuery 脚本 window.close()
能够在大多数浏览器上毫无问题地关闭当前选项卡。但是,出于安全原因,大多数现代浏览器不再支持此脚本。
当前功能:
window.close()
适用于由脚本打开的标签,或由带有 target="_blank"
的锚点(在新标签中打开)
请参阅@killstreet 对@calios 回答的评论
浏览器特定的解决方法:
谷歌浏览器:
Chrome 不允许运行 window.close() 脚本,如果您尝试使用它,则不会发生任何事情。但是,通过使用 Chrome 插件 TamperMonkey,我们可以使用 window.close() 方法如果您将 // @grant window.close
包含在 TamperMonkey 的 UserScript 标头中。
例如,我的脚本(当单击 id = 'close_page' 的按钮并且在浏览器弹出窗口上按下 'yes' 时触发)如下所示:
// ==UserScript==
// @name Close Tab Script
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Closes current tab when triggered
// @author Mackey Johnstone
// @match http://localhost/index.php
// @grant window.close
// @require http://code.jquery.com/jquery-3.4.1.min.js
// ==/UserScript==
(function() {
'use strict';
$("#close_page").click(function() {
var confirm_result = confirm("Are you sure you want to quit?");
if (confirm_result == true) {
window.close();
}
});
})();
注意:此解决方案只能在不是最后一个打开的选项卡时关闭选项卡。如此有效,如果它会通过打开最后一个选项卡而导致窗口关闭,则它无法关闭选项卡。
火狐:
Firefox 有一个高级设置,您可以启用它以允许脚本关闭窗口,从而有效地启用 window.close()
方法。要启用此设置,请转到 about:config,然后搜索并找到 dom.allow_scripts_to_close_windows 首选项并将其从 false 切换为 true。
这使您可以像使用任何其他脚本一样直接在 jQuery 文件中使用 window.close()
方法。
例如,此脚本在首选项设置为 true 的情况下完美运行:
<script>
$("#close_page").click(function() {
var confirm_result = confirm("Are you sure you want to quit?");
if (confirm_result == true) {
window.close();
}
});
</script>
这比 Chrome 解决方法好得多,因为它允许用户关闭当前选项卡,即使它是唯一打开的选项卡,并且不需要第三方插件。然而,一个缺点是它还使该脚本能够由不同的网站(不仅仅是您打算使用它的网站)运行,因此可能存在安全隐患,尽管我无法想象关闭当前选项卡会特别危险。
边缘:
令人失望的是,Edge 实际上在我尝试的所有 3 种浏览器中表现最好,并且使用 window.close()
方法无需任何配置。运行 window.close()
脚本时,会有一个额外的弹出窗口提醒您该页面正在尝试关闭当前选项卡并询问您是否要继续。
编辑:这是在旧版本的 Edge 上,而不是基于铬。我还没有测试过它,但想象它会在基于铬的版本上与 Chrome 类似
https://i.stack.imgur.com/CucLe.png
最后说明:Chrome 和 Firefox 的解决方案都是针对浏览器有意禁用的某些东西的变通方法,可能是出于安全原因。它们还都要求用户事先将其浏览器配置为兼容,因此对于供公众使用的网站可能不可行,但对于像我这样的本地托管解决方案来说却是理想的选择。
希望这有帮助! :)
有可能的。我搜索了整个网络,但是当我参加微软的一项调查时,我终于得到了答案。
尝试这个:
window.top.close();
这将为您关闭当前选项卡。
试试这个。在所有三个主要浏览器上为我工作。
<!-- saved from url=(0014)about:internet -->
<a href="#" onclick="javascript:window.close();opener.window.focus();" >Close Window</a>
Version 88.0.4324.182 (Official Build) (64-bit)
以下在 Chrome 41 中适用于我:
function leave() {
var myWindow = window.open("", "_self");
myWindow.document.write("");
setTimeout (function() {myWindow.close();},1000);
}
我已经为 FF 尝试了几个想法,包括打开一个实际的网页,但似乎没有任何效果。据我了解,任何浏览器都会使用 xxx.close() 关闭选项卡或窗口,如果它真的是由 JS 打开的,但至少 FF 不能通过在该选项卡中打开新内容来关闭选项卡。
当您考虑它时,这是有道理的——用户可能不希望 JS 关闭具有有用历史记录的选项卡或窗口。
在 FF 18 和 Chrome 24 中成功测试:
插入头部:
<script>
function closeWindow() {
window.open('','_parent','');
window.close();
}
</script>
HTML:
<a href="javascript:closeWindow();">Close Window</a>
学分转到 Marcos J. Drake。
对于仍在访问此页面的人,您只能关闭由脚本打开的选项卡或使用带有目标 _blank 的 HTML 的锚标记。这两个都可以使用
<script>
window.close();
</script>
<button class="closeButton" style="cursor: pointer" onclick="window.close();">Close Window</button>
这对我有用
window.close()
在 2k21 中不起作用,因为 Scripts may close only the windows that were opened by them.
但是,如果不是手动在浏览器中打开标签,而是自动打开标签,那么 window.close()
可以工作。
自动(当 close()
工作时):
浏览器会在新标签页中打开地址,这个标签页可以用 close() 关闭
当从另一个应用程序打开新的浏览器选项卡时(当您单击 Telegram/Whatsup/Outlook 等中的链接时) - 操作系统将打开新选项卡,并且可以使用 close() 关闭它
当你用 window.open('ya.ru') 打开 - 确保它可以用 close() 关闭
手动(当它不起作用时):
当您打开新浏览器并输入地址时。
当您单击 (+) 打开新选项卡并输入地址时
保证在未来的任何浏览器中都不会允许关闭选项卡。使用上面提到的脚本是行不通的。
我的解决方案是使用 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 扩展程序的部署可能会很痛苦。
有点晚了,但这就是我发现的......
只有当您尝试打开的窗口 close()
是由使用 window.open() 方法的脚本打开时,window.close()
才会起作用(IE 是一个例外)。
!(请参阅下面@killstreet 关于目标_blank 的锚标记的评论)
TLDR:chrome 和 firefox 允许关闭它们。
你会得到控制台错误:脚本可能不会关闭不是由脚本打开的窗口。作为一个错误,仅此而已。
您可以在 URL 中添加一个唯一参数,以了解该页面是否是从脚本(如时间)打开的 - 但它只是一个 hack 而不是本机功能,并且在某些情况下会失败。
我找不到任何方法来知道页面是否是从 open() 打开的,并且 close 不会抛出错误。这不会打印“测试”:
try{
window.close();
}
catch (e){
console.log("text");
}
你可以阅读in MDN more about the close() function
我只是想补充一下 window.close()
works 在 2021 年,chrome 91,但并非总是如此。 如果选项卡中没有历史记录(您无法返回),它可以工作的一种情况。
就我而言,我想创建几秒钟后关闭的自毁选项卡,但我一直在努力避免使用新选项卡进入开发服务器,因为显然新选项卡也是选项卡,并且它被保存在选项卡历史记录中:DI 创建在 about:blank 选项卡中链接 target=_blank
属性,它导致 window.close() 方法最终起作用的新选项卡!
这是解决相同问题的一种方法,像这样声明一个 JavaScript 函数
<script>
function Exit() {
var x=confirm('Are You sure want to exit:');
if(x) window.close();
}
</script>
将以下行添加到 HTML 以使用 <button>
调用函数
<button name='closeIt' onClick="Exit()" >Click to exit </Button>
您可以尝试使用此解决方案来欺骗浏览器使用 JavaScript + HTML 关闭当前窗口:
JS:
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
以下是创建此类链接的方法:
<a href="javascript:if(confirm('Close window?'))window.close()">close</a>
about:config
dom.allow_scripts_to_close_windows = true
可能是 Firefox 中的解决方案(可能存在很大的安全风险!)<button type="button" onclick="window.open('', '_self', ''); window.close();">Discard</button>
See also this article