Vue2.x中如何关闭window.open打开的window.name变更的跨域子标签页？

针对你遇到的跨域子窗口修改window.name导致原方案失效、Vuex持久化Window对象报错的问题，给出以下可行方案：

方案1：父窗口存活期间维护实时窗口引用（最可靠，适用于父窗口不刷新的场景） #

直接在Vue组件的本地状态或非持久化的Vuex模块中存储window.open返回的窗口引用，无需持久化（Window对象无法序列化，且父窗口刷新后引用自然失效）。

<template>
  <div>
    <button @click="openExternalTab('https://www.google.ca', 'GOOGLE')">打开Google</button>
    <button @click="openExternalTab('https://www.bing.com', 'BING')">打开Bing</button>
    <button @click="closeAllOpenedTabs">关闭所有标签页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openedTabs: [] // 存储窗口引用数组
    }
  },
  methods: {
    openExternalTab(url, targetId) {
      const newTab = window.open(url, targetId)
      if (newTab) {
        this.openedTabs.push(newTab)
        // 监听子窗口关闭事件，移除无效引用，避免内存泄漏
        newTab.addEventListener('unload', () => {
          this.openedTabs = this.openedTabs.filter(tab => tab !== newTab)
        })
      }
    },
    closeAllOpenedTabs() {
      this.openedTabs.forEach(tab => {
        try {
          // 跨域窗口可能因安全限制无法关闭，捕获错误避免阻塞
          if (!tab.closed) {
            tab.close()
          }
        } catch (err) {
          console.warn(`无法关闭标签页：${err.message}`)
        }
      })
      this.openedTabs = []
    }
  }
}
</script>

注意：如果父窗口刷新或关闭，存储的窗口引用会丢失，无法再关闭之前打开的子窗口——这是浏览器的安全限制，无法绕过。

方案2：针对可控制的子页面，用跨窗口通信触发关闭 #

如果子页面是你可以修改的同域/同源页面，可以通过Broadcast Channel实现父窗口向子窗口发送关闭指令：

父窗口代码 #

// 创建广播频道
const closeChannel = new BroadcastChannel('close-opened-tabs')

// 触发关闭时发送信号
function triggerCloseAll() {
  closeChannel.postMessage({ action: 'close' })
}

子页面代码（需嵌入到你的子页面中） #

const closeChannel = new BroadcastChannel('close-opened-tabs')
closeChannel.addEventListener('message', (event) => {
  if (event.data.action === 'close') {
    window.close()
  }
})

局限：第三方跨域页面无法修改代码，因此该方案仅适用于你自己的子页面。

关于原方案的补充说明 #

• 你尝试的LocalStorage存储targetId的方案，失效原因是跨域子页面会修改window.name，导致无法通过window.open('', targetId)获取窗口引用——这是浏览器同源策略的限制，没有办法绕过。
• Vuex持久化Window对象报错是因为Window对象包含循环引用（window.window指向自身），无法序列化为JSON，因此绝对不能将Window对象存入持久化存储中。

内容的提问来源于stack exchange，提问作者BustedSanta