JavaScrip 在主窗口打开浏览器子窗口时，监听子窗口开启与关闭，可在主窗口关闭子窗口

需求

vue项目，需要打开浏览器子窗口，并且要监听子窗口的刷新与关闭，如果子窗口刷新，主窗口需要自动关闭子窗口。主窗口关闭子窗口一起关闭。

解决思路

看看官方给的思路

在Vue中，如果你想关闭当前浏览器标签页，你可以使用JavaScript的window.close()方法。
但是，出于安全考虑，现代浏览器只允许关闭由脚本打开的窗口。
因此，如果当前标签页不是通过脚本打开的，你可能无法使用这个方法来关闭它。

如果你的Vue应用是在一个通过脚本打开的新窗口中运行的，那么你可以直接使用window.close()来关闭这个窗口。
如果你想关闭当前浏览器标签页，你可以尝试引导用户手动关闭，或者提示用户使用某些浏览器的特定功能（例如，Chrome允许用户关闭非脚本打开的标签页）。

代码

主窗口代码

created() {
   
   
    const self = this
    // 监听 localStorage 值改变
    window.addEventListener('storage', function (event) {
   
   
      if (event.key === 'interfaceState' && event.newValue === 'false' && event.oldValue === 'true') {
   
   
        self.newWindow.close()
      }