调用confirmStep函数后如何自动关闭未通过window.open打开的页面

失效原因说明 #

浏览器出于安全策略限制，仅允许关闭通过 window.open() 主动打开的页面，用户手动输入地址、从书签/其他网页跳转打开的页面，默认禁止通过 window.close() 直接关闭，避免恶意站点随意关闭用户正常浏览的页面。

可行实现方案 #

方案1：通用浏览器场景兼容hack #

该方案通过模拟当前页面为JS主动打开的状态绕过限制，支持Chrome、Edge、Firefox等绝大多数主流桌面浏览器，移动端大部分浏览器也可兼容，同时添加兜底跳转逻辑避免关闭失败后用户停留在无效页面。
修改后的代码如下：

confirm() {
  this.$buefy.dialog.confirm({
    message: this.t('tickets.stages.confirmation.simplified_confirm_reply'),
    onConfirm: async () => {
      // 执行原有确认逻辑，若confirmStep为同步方法可去掉async/await
      await this.confirmStep()
      // 延时1.5秒后执行关闭，可根据需求调整时长
      setTimeout(() => {
        // 绕过关闭限制的核心hack
        window.opener = window
        window.open('', '_self')
        window.close()
        // 关闭失败兜底逻辑，二选一即可
        if (!window.closed) {
          // 选项1：返回上一级页面
          // history.back()
          // 选项2：跳转到系统首页/指定落地页，替换为实际业务地址
          window.location.href = '/home'
        }
      }, 1500)
    }
  })
}

方案2：内嵌Webview场景使用平台原生API #

如果你的页面是嵌入在企业微信、钉钉、飞书、自研客户端等场景的Webview中，直接使用对应平台提供的官方关闭API即可，兼容性比通用hack更好：

• 企业微信/微信内嵌页：调用 wx.closeWindow()
• 钉钉内嵌页：调用 dd.biz.navigation.close()
• 飞书内嵌页：调用 tt.closeWindow()
  替换方案1中的 window.close() 部分即可。

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