window.close() 的用法与注意事项

window.close() 方法用于关闭浏览器窗口。

在网页开发中，我们经常需要控制浏览器窗口的行为，其中一个常见的需求就是关闭当前的窗口。JavaScript 提供了 `window.close()` 方法来实现这一功能。然而，需要注意的是，`window.close()` 方法的使用受到浏览器的安全策略限制，并非所有情况下都能成功执行。

理解 window.close() 方法

`window.close()` 是 `window` 对象的一个方法，用于关闭由脚本打开的窗口。当你在一个页面中调用 `window.close()` 时，如果该窗口是通过 `window.open()` 方法打开的，那么它就可以被成功关闭。否则，浏览器出于安全考虑，会阻止脚本直接关闭由用户或浏览器本身打开的窗口。

语法

调用 `window.close()` 的语法非常简单，直接在 JavaScript 代码中执行即可：

window.close()

限制与注意事项

这是理解 `window.close()` 方法的关键。由于安全原因，浏览器对脚本关闭窗口的行为做了严格的限制。以下是需要重点关注的几点：

• 只能关闭通过脚本打开的窗口： `window.close()` 只能关闭由 `window.open()` 方法创建的窗口。这意味着，如果你在用户直接打开的浏览器标签页或窗口中执行 `window.close()`，它很可能不会产生任何效果。
• 同源策略限制： 即使是脚本打开的窗口，如果父窗口和子窗口的域名、协议或端口不一致（即不满足同源策略），那么子窗口也无法通过 `window.close()` 关闭自己。
• 浏览器自身的限制： 现代浏览器为了防止恶意网站滥用此功能，会对 `window.close()` 的调用进行额外的安全检查。有时即使符合上述条件，也可能因为浏览器策略而无法关闭。
• 用户交互的必要性： 通常，触发 `window.close()` 的操作应该由用户的明确行为引起，例如点击一个“关闭”按钮。直接在页面加载完成后自动关闭窗口，容易被浏览器判定为恶意行为。
• 返回值： `window.close()` 方法本身没有返回值，它执行的是一个动作。

window.close() 的典型应用场景

尽管存在限制，`window.close()` 在一些特定的场景下仍然非常有用。通常这些场景都涉及到通过 JavaScript 创建的弹出窗口或辅助窗口。

1. 关闭通过 JavaScript 打开的弹出窗口（Pop-up Windows）

这是 `window.close()` 最常见的用途。当你在一个页面中使用 `window.open()` 打开一个新的窗口（通常是一个小的弹出窗口，用于显示信息、进行登录、选择数据等），你可以在该弹出窗口内部提供一个关闭按钮，通过点击该按钮来调用 `window.close()`，从而关闭这个弹出窗口。

示例：

假设你有一个弹出窗口（例如 `popup.html`），其内容如下：

lt!DOCTYPE htmlgt
lthtmlgt
ltheadgt
    lttitlegt弹出窗口lt/titlegt
lt/headgt
ltbodygt
    lth1gt这是一个弹出窗口lt/h1gt
    ltbutton onclick="window.close()"gt关闭此窗口lt/buttongt
lt/bodygt
lt/htmlgt

在父页面（例如 `main.html`）中，你会这样打开这个弹出窗口：

lt!DOCTYPE htmlgt
lthtmlgt
ltheadgt
    lttitlegt主页面lt/titlegt
lt/headgt
ltbodygt
    lth1gt主页面内容lt/h1gt
    ltbutton onclick="openPopup()"gt打开弹出窗口lt/buttongt

    ltscriptgt
        function openPopup() {
            // 打开一个新窗口，宽度300px，高度200px
            window.open(popup.html, myPopup, width=300,height=200)
        }
    lt/scriptgt
lt/bodygt
lt/htmlgt

在这个例子中，当用户点击 `popup.html` 中的“关闭此窗口”按钮时，`window.close()` 会被执行，从而关闭 `popup.html` 这个由 `window.open()` 打开的窗口。

2. 登录框或注册框的关闭

类似于弹出窗口，许多网站会使用 JavaScript 打开一个模态框（Modal）或独立的登录/注册窗口。当用户完成操作或点击取消时，就可以使用 `window.close()` 来关闭这个窗口。

3. 广告窗口的关闭（需谨慎使用）

在一些合规的广告系统中，可能会以弹出窗口的形式展示广告。当广告展示完毕或用户点击关闭时，广告窗口会调用 `window.close()`。但请注意，滥用广告窗口的弹出和关闭行为是会被浏览器和用户所厌恶的。

4. 跨窗口通信后的关闭

在某些复杂的 Web 应用中，可能需要打开一个辅助窗口进行一些操作，完成后再由父窗口或子窗口通知对方关闭。例如，在一个 OAuth 授权流程中，用户在一个弹出窗口中完成授权，授权完成后，该弹出窗口可以将授权结果通过 `window.postMessage` 发送给父窗口，然后父窗口再通知该弹出窗口关闭。

更高级的实现方式和替代方案

如前所述，`window.close()` 的限制很多。在许多现代 Web 应用中，开发者会倾向于使用更灵活、更安全的替代方案来模拟窗口关闭的效果。

1. 使用模态框（Modal Dialogs）

模态框是嵌入在当前页面中的一个层，它可以覆盖页面内容，模拟弹出窗口的效果，但它实际上是当前页面的一部分。关闭模态框时，只需隐藏该模态框的 DOM 元素即可，这比 `window.close()` 要简单得多，也完全不受安全策略的限制。

实现模态框通常使用 CSS 来控制显示/隐藏，并配合 JavaScript 来切换样式。许多前端框架（如 React, Vue, Angular）和 UI 库（如 Bootstrap, Material-UI）都提供了现成的模态框组件。

简单的模态框示例（HTML + CSS + JS）：

lt!DOCTYPE htmlgt
lthtmlgt
ltheadgt
    lttitlegt模态框示例lt/titlegt
    ltstylegt
        .modal {
            display: none /* 默认隐藏 */
            position: fixed /* 固定定位 */
            z-index: 1 /* 置顶 */
            left: 0
            top: 0
            width: 100%
            height: 100%
            overflow: auto /* 如果内容溢出，则滚动 */
            background-color: rgb(0,0,0) /* 背景色 */
            background-color: rgba(0,0,0,0.4) /* 半透明背景 */
        }

        .modal-content {
            background-color: #fefefe
            margin: 15% auto /* 垂直居中 */
            padding: 20px
            border: 1px solid #888
            width: 80% /* 宽度 */
        }

        .close-button {
            color: #aaa
            float: right
            font-size: 28px
            font-weight: bold
        }

        .close-button:hover,
        .close-button:focus {
            color: black
            text-decoration: none
            cursor: pointer
        }
    lt/stylegt
lt/headgt
ltbodygt

lth1gt主页面内容lt/h1gt
ltbutton onclick="showModal()"gt打开模态框lt/buttongt

lt!-- 模态框 --gt
ltdiv id="myModal" class="modal"gt

    lt!-- 模态框内容 --gt
    ltdiv class="modal-content"gt
        ltspan class="close-button" onclick="hideModal()"gttimeslt/spangt
        lth2gt这是一个模态框lt/h2gt
        ltpgt这里是模态框的内容。lt/pgt
    lt/divgt

lt/divgt

ltscriptgt
    // 获取模态框元素
    var modal = document.getElementById("myModal")

    // 当用户点击按钮时，显示模态框
    function showModal() {
        modal.style.display = "block"
    }

    // 当用户点击 (x), 关闭按钮时，隐藏模态框
    function hideModal() {
        modal.style.display = "none"
    }

    // 当用户点击模态框外部时，关闭模态框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none"
        }
    }
lt/scriptgt

lt/bodygt
lt/htmlgt

2. 使用 `iframe` 嵌入内容

如果你需要在一个页面中加载另一个页面的内容，并且希望这个“嵌入页面”能够被独立控制（例如，有一个关闭按钮），可以使用 `