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()
      }
    })
    // 关闭刷新浏览器监听
    window.onbeforeunload = this.handleBeforeUnload
},
methods: {
    handleBeforeUnload() {
      // 关闭子页面
      if (this.newWindow) {
        this.newWindow.close()
        localStorage.removeItem('interfaceState')
    },
    // 小窗口
    onSmallWindow() {
      const { href } = this.$router.resolve({ path: '/*****' })
      this.newWindow = window.open(href, 'newWindow', 'height=200,width=250,top=30,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
    }
},

子窗口代码

created() {
    localStorage.setItem('interfaceState', true)
    // 关闭刷新浏览器监听
    window.onbeforeunload = this.handleBeforeUnload
},
methods: {
	// 关闭浏览器监听
    handleBeforeUnload(event) {
      localStorage.setItem('interfaceState', false)
    },
    // 屏蔽鼠标右键及F1-F12
    stopF5Refresh() {
      document.onkeydown = function (e) {
        var evt = window.event || e
        var code = evt.keyCode || evt.which
        // 屏蔽F1---F12
        if (code > 111 && code < 124) {
          if (evt.preventDefault) {
            evt.preventDefault()
          } else {
            evt.keyCode = 0
            evt.returnValue = false
          }
        }
      }
      // 禁止鼠标右键菜单
      document.oncontextmenu = function (e) {
        return false
      }
      // 阻止后退的所有动作，包括 键盘、鼠标手势等产生的后退动作。
      history.pushState(null, null, window.location.href)
      window.addEventListener('popstate', function () {
        history.pushState(null, null, window.location.href)
      })
    },
}