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

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

情况说明

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

排查过程

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

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

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

<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，试一下。

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()的失效跟环境有关，待部署后的再测试。

 

本文转载于：https://juejin.cn/post/7555042405127487498

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。