关闭浏览器窗口中的浏览器标签页
在某些特定情况下,关闭浏览器标签页可能是必要且必不可少的,特别是如果你正在开发支持支付系统的网站(当然,可能还有其他可能的用例)。在线交易过程中,会创建一个会话,并在后台发生各种事情;在那段时间里,浏览器的工作是显示来自服务器的响应,以便客户端或用户可以看到到底发生了什么。
交易完成后,我们应该关闭当前在该特定浏览器标签页内发生的会话,以免滥用个人信息。因此,可以通过关闭该特定浏览器标签页来完成。
你可能见过这种情况,你通过银行门户在线进行交易,然后在你从网上银行账户注销后,银行会在屏幕上显示一条文本,告诉我们关闭浏览器窗口。当然,你可以使用浏览器中的关闭按钮,也可以创建一个关闭按钮并要求用户点击它。让我们看看我们如何详细实现这一点。
使用 JavaScript 中的 window.close()
方法关闭浏览器标签页
为了关闭浏览器标签页,JavaScript 为我们提供了一个与 window 对象关联的方法,该方法称为 window.close()
。使用这种方法,我们可以轻松实现关闭浏览器标签页的目标。你也可以直接使用 close()
方法而不使用关键字 window
。所有现代浏览器(如 Chrome、Brave 和 Firefox)都支持此方法。
那么,让我们看看如何在 JavaScript 中实现此方法并关闭浏览器标签页。在我们的 HTML 文档中,我们有一个 body 标签,其中包含一个锚标签和一个脚本标签。该脚本将用于将我们的 JavaScript 文件与 HTML 文档链接起来。锚标记将代表我们将使用的按钮来执行浏览器标签页关闭操作。这个锚标签的样式,我们的按钮,是在 style
标签内完成的。这个锚标记指向函数 close_tab()
,它存在于我们的脚本文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin-top: 50px;
margin-left: 50px;
}
a{
width: 100px;
height: 50px;
background-color: brown;
color: #ffffff;
text-decoration: none;
padding: 10px;
}
</style>
</head>
<body>
<!-- This is a button -->
<a href="javascript:close_tab();">close browser tab</a>
<script src="script.js"></script>
</body>
</html>
在我们的 script.js
文件中,我们有一个名为 close_tab()
的函数,该函数仅在用户单击 HTML 文档中的 关闭浏览器标签页
按钮时执行。
function close_tab() {
if (confirm("Do you want to close this tab?")) {
window.close();
}
}
在这里,我们还将使用另一种称为 confirm()
的方法,它将字符串作为参数。此方法将显示一个弹出框或警告框,其中包含我们作为参数传递给 confirm()
的字符串,并且它还具有 Ok
和 Cancel
按钮。我们在 if
语句中调用这个方法是因为这个函数将返回 true
或 false
值。
因此,如果用户按下 cancel
按钮,则 confirm()
函数将返回 false
。如果用户按下 Ok
按钮,则该函数将返回 true
。如果 close()
函数返回 false
,那么我们的 if
块将不会被执行,如果它返回 true
,那么只有我们的 if
块将被执行,然后我们的函数 window.close()
将执行。然后它将关闭浏览器标签页。