JS关闭页面|极客笔记

JS关闭页面

在网页开发中，有时需要通过JavaScript来控制页面的行为，比如关闭页面。在本文中，我们将详细讨论如何使用JavaScript关闭页面的方法。

window.close()方法

在JavaScript中，可以通过window.close()方法来关闭当前窗口或者打开的子窗口。该方法可以调用当前页面所在的窗口对象来关闭页面。

示例代码

下面是一个简单的示例代码，演示了如何使用window.close()方法来关闭页面：

<!DOCTYPE html>
<html>
<head>
    <title>关闭页面示例</title>
</head>
<body>
    <button onclick="closeWindow()">关闭页面</button>

    <script>
        function closeWindow() {
            window.close();
        }
    </script>
</body>
</html>

运行结果

在点击“关闭页面”按钮后，当前页面将会被关闭。需要注意的是，window.close()方法只能关闭由JavaScript打开的窗口，对于通过用户手动打开的窗口（比如浏览器的选项卡），该方法无效。

关闭当前标签页

除了使用window.close()方法来关闭当前窗口外，还可以通过window.close()来关闭当前标签页。

示例代码

下面是一个示例代码，演示了如何关闭当前标签页：

<!DOCTYPE html>
<html>
<head>
    <title>关闭标签页示例</title>
</head>
<body>
    <button onclick="closeTab()">关闭标签页</button>

    <script>
        function closeTab() {
            window.open('', '_self', '');
            window.close();
        }
    </script>
</body>
</html>

运行结果

在点击“关闭标签页”按钮后，当前标签页将会被关闭。

在特定条件下关闭页面

有时候，在特定条件下，我们需要关闭页面。比如当用户点击一个按钮后，关闭页面。下面我们来介绍如何在特定条件下关闭页面。

示例代码

下面是一个示例代码，演示了在特定条件下关闭页面：

<!DOCTYPE html>
<html>
<head>
    <title>特定条件下关闭页面示例</title>
</head>
<body>
    <button onclick="checkAndClose()">点击关闭页面</button>

    <script>
        function checkAndClose() {
            if (confirm("确认关闭页面？")) {
                window.close();
            }
        }
    </script>
</body>
</html>

运行结果

在点击“点击关闭页面”按钮后，会弹出一个确认框。如果用户点击确认，则页面将会被关闭。

总结

通过本文的介绍，我们学习了如何使用JavaScript来关闭页面。window.close()方法可以用来关闭当前窗口或者打开的子窗口，window.open('', '_self', ''); window.close()可以用来关闭当前标签页，而在特定条件下关闭页面则需要结合条件和window.close()方法来实现。