window.close()失效 + Chrome浏览器调试线上代码

情况说明

  1. 主系统单点登录点击触发window.open()打开本系统。
  2. 是发布生产后的新需求 :要求退出登录后直接关闭当前系统页面
  3. 本地运行增加了window.close()方法实现功能,点击退出后页面没反应

排查过程

官方解析中说明,window.close() 方法只能关闭由window.open()或者浏览器直接输入url打开的页面,其余情况安全考虑是被限制的。

1. 验证window.close()失效是否与window.open()触发打开有关

于是保持原本退出登录的window.close()方法不变, 尝试增加打开按钮,点击后调用window.open()打开系统链接。

html 复制代码
<template>
	// ......其他代码
	<a href="javascript:;" @click="logout">退出</a>
	<a href="javascript:;" @click="logopen">打开</a>
</template>

<script setup>
function logout() {
	ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		userStore.logOut().then((redirect) => {
			window.close()  // 使用close方法关闭
			location.href = redirect || ((import.meta.env.VITE_PUBLIC_PATH) + '/index');
	})
}).catch(() => { });
}

function logopen() {
	window.open('http://localhost/web/index')  // 使用open方法打开
}
</script>

尝试结果:

  1. 打开、退出功能全部正常
  2. 点击打开按钮,跳转到本地运行的此系统页面。
  3. 点击退出按钮,打开的页面关闭,并且基础的退出清除功能还在。

判断: 主系统的打开方式没有问题,需要把焦点集中在此系统的window.close()失效上。

2. 在退出时,先手动打开一个新窗口,再关闭

在搜索时发现了处理办法,先打开空白窗口触发window.open(),再close,试一下。

js 复制代码
function logout() {
	ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		userStore.logOut().then((redirect) => {
			window.open("about:blank","_self")  // 先打开一个空白窗口
			window.close()  // 使用close方法关闭
			location.href = redirect || ((import.meta.env.VITE_PUBLIC_PATH) + '/index');
	})
}).catch(() => { });
}

尝试结果: 无效。

3. 调试线上代码,验证是否跟环境有关

在本地环境下的尝试都不成功的情况下,猜测是否跟环境有关,尝试调试线上代码。

第一步:定位调试文件

根据退出功能中的提示词确定注销并退出系统吗?找到线上代码中退出按钮的所在文件

第二步:创建存放代码的文件夹并允许修改
第三步:修改内容并保存
第四步:刷新验证文件是否修改成功
第五步:验证退出功能

点击退出,页面关闭。

⚠️Tips:

  1. 必须要打开调试器 --- 之前替换的内容才会生效。
  2. 调试完成 后,务必清除配置,以免对后续产生不必要的影响。

排查结果

由此可得,window.open()的失效跟环境有关,待部署后的再测试。

Over

相关推荐
Dragonir16 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
peachSoda717 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH17 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金3904117 小时前
flutter 仿商场_首页
前端
少卿17 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>17 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu18 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_18 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放18 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
少卿18 小时前
React Native Vector Icons 安装指南
前端·react native