Vue开发实践：解决Chrome浏览器禁止通过代码关闭窗口的问题

前言

????????在开发 Electron 桌面端应用时，软件有一个退出软件的按钮，用于关闭应用程序。然而，在实现这一功能的过程中，我们可能会遇到一些问题。本文将探讨这个问题，并给出解决方案。? ? ? ?

实现

????????询问负责 Electron 的同学，得知直接关闭当前窗口就行。

? ? ? ? 没有花多少时间去思考，第一时间赶到的代码是 window.close();

? ? ? ? 但是实际运行一下发现并没有关闭窗口，打开控制栏发现警告?" 只能关闭由代码打开的窗口?"：

? ? ? ? 这是因为 Chrome 浏览器的安全限制，window.close() 方法只能在通过 window.open() 方法或脚本创建的窗口中调用。这意味着我们只能关闭由 JavaScript 打开的窗口或标签页。

? ? ? ? 解决原理

????????网上查询了下相关解决方法，发现解决方案都是： 通过 JavaScript 打开一个新窗口到自身，新窗口（具有"由 JavaScript 创建"属性）会覆盖原来的窗口（不具有 "由 JavaScript 创建"属性），然后再执行 window.close() 即可关闭窗口。

????????以下是各种方法汇总：

????????但是经过我的测试，以上统统只能跳转到空白页，并没有实现关闭窗口！

????????问题原因

????????偶然的，我发现在首页（此时 history?栈只有当前页记录）点击关闭软件按钮可以完美的实现功能，一旦进入软件，再返回首页点击关闭软件按钮就只能跳转到空白页。那么问题就出在历史记录上面，查阅发现是因为 Chrome 浏览器为了保护用户数据的安全，不允许直接关闭包含历史记录的窗口。历史记录是用户在浏览器中浏览过的网页记录，如果允许直接关闭窗口，可能会导致用户丢失未保存的浏览数据，或者导致误操作关闭了包含重要信息的窗口。

? ? ? ?那么我们知道是因为存在历史记录导致我们的代码无法正确执行，那么让历史记录一直为空就好了，参考我之前写的?Element UI导航菜单之秘：无痕迹浏览与历史记录栈的管理 ，将项目内所有路由跳转从 push 修改为 replace 模式，这样?history?栈就会一直为当前页对应记录，就不会影响到我们关闭窗口了。

????????解决方案

1. 通过 JavaScript 打开一个新窗口到自身，新窗口（具有"由 JavaScript 创建"属性）会覆盖原来的窗口（不具有 "由 JavaScript 创建"属性），然后再执行 window.close() 即可关闭窗口。
2. 将项目的路由跳转从 push 修改为 replace 模式。这样，history 栈就会一直为当前页对应记录，就不会影响到我们关闭网页了。

????????需要注意的是，以上方法可能会影响到用户的使用体验，因为用户无法使用历史记录回退前进功能了。因此，在决定是否使用这些方法时，需要权衡利弊。

总结

????????虽然最后我们实现代码关闭窗口的功能，但是我也在想：用户无法使用历史记录回退/前进功能了，虽然我们也可以再自己设置实体按键。但是用户真的需要这么一个实体关闭按钮吗？用户自身不能点击右上角关闭吗？

? ? ? ? 在某些情况下，我们需要监听用户的关闭行为，但有时我们也无需这么做。那么在某些情况下这个关闭按钮的需求就是伪需求，属于不合理的需求，我们应该直接对产品说出?delete it！删除掉这个退出实体按钮是更好的选择！至于功能，用户自己会动手。