在前端开发中，有时需要打开一个弹窗或者新窗口来展示一些内容。而当用户完成操作后需要关闭这个窗口，使用 window.close() 方法是常见做法。但是，在 Google Chrome 浏览器中，这个方法会遇到一些问题，本文将详细介绍这个问题以及解决方案。
问题描述
window.close() 方法的作用是关闭当前窗口。在 Chrome 浏览器中，如果这个窗口不是通过 JavaScript 打开的，那么这个方法就不会生效。这意味着，如果用户手动打开了一个弹窗或者新窗口，那么使用 window.close() 方法就不能关闭这个窗口。
这个问题的根源在于 Chrome 浏览器的安全机制。为了防止恶意网站关闭用户的浏览器窗口，Chrome 浏览器规定只有通过 JavaScript 打开的窗口才能使用 window.close() 方法关闭。
解决方案
方案一：打开窗口时记录其引用
我们可以在打开一个弹窗或者新窗口时，将其引用保存下来。这样，即使用户手动关闭了这个窗口，我们仍然可以通过保存的引用来关闭它。
以下是一个示例代码：
--- --------- - ---------------- ------
在这个代码中，我们将打开的新窗口的引用保存在变量 newWindow 中。当需要关闭这个窗口时，我们只需要调用下面的代码：
------------------
这样，即使用户手动关闭了这个窗口，我们也可以通过保存的引用来关闭它。
方案二：添加标记
另一种解决方法是给弹窗或者新窗口添加一个标记。这个标记可以是一个 URL 参数，也可以是一个 Cookie。当用户完成操作后，我们可以检查这个标记是否存在。如果存在，说明用户已经完成了操作，我们就可以关闭这个窗口。
以下是一个示例代码：
在打开窗口时，我们添加一个 URL 参数 isPopup=true：
--------------- - ---------------- ------
在弹窗或者新窗口的页面中，我们可以使用以下代码检查这个参数是否存在：
-- ----------------------------------------------- --- --- - -- ------------- --------------- -
指导意义
本文介绍了在 Chrome 浏览器中使用 window.close() 方法遇到的问题以及解决方案。需要注意的是，这个问题只会出现在 Chrome 浏览器中，其他浏览器并不受影响。
在实际开发中，我们应该选择合适的解决方案来关闭弹窗或者新窗口。如果我们需要在弹窗或者新窗口中进行一些操作，那么使用方案一是最好的选择。如果我们只是展示一些内容并且希望用户完成操作后自动关闭窗口，那么使用方案二更加简单和直接。
总之，了解浏览器的安全机制对于前端开发人员来说是非常重要的。只有在充分了解这些机制的情况下，我们才能编写出更加安全和可靠的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25830