JavaScript 如何关闭浏览器窗口中的当前标签
在本教程中,我们将学习如何使用JavaScript关闭浏览器窗口。假设用户用2个标签打开了你的网站,并且不想让它出现,那么你可以用JavaScript自动关闭一个标签。
另外,如果你注意到一些网络应用自动打开浏览器窗口来捕捉人脸,当你点击按钮捕捉图像时,它就会自动关闭。这都是我们使用JavaScript可以做到的。
本教程将教授使用JavaScript关闭浏览器窗口中当前标签的不同例子。
注意 – JavaScript从来不允许开发者关闭用户打开的窗口。这是由于一些安全问题造成的。所以,程序员只能关闭用JavaScript的open()方法打开的浏览器窗口。
语法
你可以按照下面的语法,使用close()方法来关闭浏览器的窗口。
let new_window = window.open(URL, width, height);
new_window.close();
在上面的语法中,我们在创建新窗口时将返回的值存储在new_window变量中。之后,我们使用close()方法来关闭新打开的窗口。
示例
在这个例子中,我们有两个按钮;一个是打开一个新标签,另一个是关闭一个用JavaScript打开的新标签。
用户首先需要通过点击打开新标签的按钮用JavaScript打开标签。在他们可以点击关闭新标签的按钮后,观察到它自动关闭了标签。
<html>
<body>
<h2>Using the <i>window.close()</i> method to close the browser's tab</h2>
<p>Click "Open New Tab" to open a page in new tab and click "Close New Tab" to colse the opened tab</p>
<button id = "openTab" onclick = "openTab()">Open New Tab </button><br><br>
<button id = "closeTab" onclick = "closeTab()">Close New Tab</button>
<script>
// creating the variable to store the tab
var new_tab;
function openTab() {
// open a new tab
new_tab = window.open("https://www.tutorialspoint.com/answers/shubham-vora");
}
function closeTab() {
// close tab
new_tab.close();
}
</script>
</body>
</html>
示例
在下面的例子中,我们创建了两个按钮,像上面的例子一样,用来打开和关闭标签。然而,在这个例子中,我们还添加了’_blank’作为打开方法的参数,这将打开一个新的窗口而不是一个新的标签。
接下来,用户可以点击新窗口按钮来关闭弹出窗口。
<html>
<body>
<h2>Using the <i>window.close() method</i> to close the browser's window.</h2>
<p>Click "Open New Window" to open the page in new window and click "Close New Window" to colse the opened window</p>
<button id = "openWidnow" onclick = "openWindow()"> open new Window</button><br><br>
<button id = "closeWidnow" onclick = "closeWindow()">Close new Window</button>
<script>
// creating the variable to store window
var new_window;
function openWindow() {
// open a new window
new_window = window.open("https://www.tutorialspoint.com/index.htm", "_blank", "width=800");
}
function closeWindow() {
// close the window
new_window.close();
}
</script>
</body>
</html>
因此,用户学会了用JavaScript打开一个新的标签或窗口。同时,也学会了使用close()方法关闭标签或窗口。
另外,我们可以打开新的窗口来接受用户输入,当用户提交表单数据时,我们可以在处理表单数据的函数中调用close()方法。