BOM.close()怎么用？如何关闭窗口？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《BOM.close()怎么用？如何关闭当前窗口？》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

window.close()方法可以关闭由JavaScript通过window.open()打开的窗口，但无法关闭用户手动打开的窗口。1. window.close()仅对脚本打开的窗口有效；2. 浏览器出于安全考虑限制其使用；3. 可通过重定向页面、提示用户手动关闭或管理子窗口引用来实现替代方案。

关闭当前浏览器窗口，主要依赖于浏览器对象模型（BOM）中的window.close()方法。但要明确一点：出于安全考虑，这个方法并不是在所有情况下都能成功关闭窗口的。它通常只能关闭那些由JavaScript脚本（比如通过window.open()）打开的窗口。

window.close()方法就是用来关闭当前浏览器窗口或标签页的。它的使用非常直接，没有参数。

// 尝试关闭当前窗口
window.close();

然而，正如前面提到的，直接调用window.close()并不总能奏效。这是浏览器为了防止恶意网站在用户不知情的情况下关闭其浏览会话而设定的安全机制。简而言之，如果你想关的窗口不是你用脚本打开的，那多半是关不掉的。

为什么我的window.close()不起作用？深入理解浏览器安全限制

这是个老生常谈的问题了，很多开发者刚接触这个方法时都会遇到。说白了，window.close()之所以经常“失灵”，完全是出于用户体验和安全性的考量。想象一下，如果你访问一个网站，它能随意关闭你正在浏览的任何标签页，那岂不是乱套了？所以，浏览器对此有严格的限制。

核心规则就是：一个窗口或标签页，只有在它是由JavaScript代码通过window.open()方法打开时，才能被同一来源的脚本调用window.close()来关闭。如果这个窗口是用户手动打开的（比如从收藏夹点击，或者直接在地址栏输入URL），那么window.close()通常会失效，或者在某些浏览器中会弹出一个确认提示，但用户通常会选择不关闭。

这个限制的目的是为了把控制权交还给用户。用户才是浏览器的主人，他们有权决定哪些窗口该开，哪些该关。我个人觉得，这个设计是非常合理的，它避免了网页滥用资源、干扰用户正常浏览的糟糕体验。所以，当你发现window.close()没反应时，别急着骂浏览器，它其实是在保护你的用户。

除了window.close()，还有其他关闭窗口的方法吗？

严格意义上讲，如果你的目标是“强制”关闭一个非脚本打开的窗口，答案是：没有。浏览器不会提供这种绕过安全限制的后门。我们能做的，更多是引导用户，或者在特定场景下优化用户体验。

如果你确实需要让用户离开当前页面，但又不能直接关闭它，可以考虑以下几种策略：

1. 重定向到空白页或退出页： 你可以将当前窗口重定向到一个空白页或者一个“您已退出”的页面，这比尝试关闭一个不可能关闭的窗口要优雅得多。

   // 重定向到空白页
   window.location.href = 'about:blank';
   // 或者重定向到你的应用退出页
   // window.location.href = '/logout.html';

   使用window.location.replace('about:blank');会更好，因为它会替换掉历史记录中的当前页面，用户无法通过“后退”按钮回到之前的页面，这在某些退出场景下是期望的行为。

2. 提示用户手动关闭： 这可能是最直接也最无奈的方法。当你的应用流程结束，或者用户需要离开时，你可以显示一个友好的提示，告诉他们“您可以关闭此窗口/标签页了”。

   alert('操作已完成，请手动关闭此窗口。');
   // 或者在页面中显示一个显眼的提示信息
   document.getElementById('message').innerText = '感谢您的使用，您可以安全地关闭此页面了。';

3. 针对window.open()打开的子窗口： 如果你是通过window.open()打开了一个新的子窗口或标签页，并且你保留了对这个子窗口的引用，那么你可以用这个引用来关闭它。

   let newWindow = window.open('https://example.com', '_blank', 'width=800,height=600');
   
   // 假设在某个事件后需要关闭这个子窗口
   if (newWindow) {
       newWindow.close();
   }

   即使是这种情况下，一些浏览器也可能要求newWindow在被关闭前至少执行过一次用户交互（比如点击了按钮），或者在newWindow内部，其自身的window.close()也需要满足“由脚本打开”的条件。

管理多个窗口：如何关闭通过window.open()打开的特定子窗口？

这个场景就比较明确了，也相对容易实现。当你使用window.open()方法打开一个新窗口或标签页时，这个方法会返回一个对新打开窗口的引用（一个Window对象）。只要你持有这个引用，你就可以通过它来控制这个子窗口，包括关闭它。

// 1. 打开一个新窗口，并获取其引用
let popupWindow; // 声明一个变量来存储窗口引用

function openMyPopup() {
    // _blank 表示在新标签页或窗口中打开
    // width和height是可选的窗口特性
    popupWindow = window.open('child-page.html', '_blank', 'width=800,height=600');

    // 可以在这里做一些检查，比如新窗口是否被弹窗拦截器阻止
    if (!popupWindow || popupWindow.closed || typeof popupWindow.closed == 'undefined') {
        alert('弹窗可能被浏览器阻止了，请检查您的设置。');
    }
}

function closeMyPopup() {
    // 2. 使用之前获取的引用来关闭窗口
    if (popupWindow && !popupWindow.closed) {
        popupWindow.close();
    } else {
        console.log('子窗口已经关闭或不存在。');
    }
}

// 示例：页面加载后，用户点击按钮打开和关闭
// <button onclick="openMyPopup()">打开子窗口</button>
// <button onclick="closeMyPopup()">关闭子窗口</button>

需要注意的是，popupWindow.close()的调用时机很重要。如果子窗口在被打开后立即被关闭，或者用户在子窗口中导航到了其他域，popupWindow.close()可能也会失败。这是因为跨域安全策略，以及浏览器对于用户意图的判断。

此外，如果子窗口在被关闭前，父窗口就关闭了或者刷新了，那么父窗口存储的popupWindow引用就会失效。所以，在复杂的应用中，管理多个窗口的生命周期确实是个挑战。通常，我们会尽量避免过度依赖这种父子窗口的交互，而是倾向于使用模态框（Modal）或单页应用（SPA）内部的视图切换来模拟多窗口体验，这样更容易控制和管理。

今天关于《BOM.close()怎么用？如何关闭窗口？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！