记录---window.close()失效 + Chrome浏览器调试线上代码
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<h2 data-id="heading-0">情况说明</h2>
<ol>
<li>主系统单点登录点击触发<code>window.open()</code>打开本系统。</li>
<li>是发布生产后的新需求：要求退出登录后<code>直接关闭当前系统页面</code>。</li>
<li><code>本地运行</code>增加了<code>window.close()</code>方法实现功能，<code>点击</code>退出后页面<code>没反应</code>。</li>
</ol>
<h2 data-id="heading-1">排查过程</h2>
<p>官方解析中说明，window.close() 方法只能关闭由window.open()或者浏览器直接输入url打开的页面，其余情况安全考虑是被限制的。</p>
<h3 data-id="heading-2">1. 验证window.close()失效是否与window.open()触发打开有关</h3>
<p>于是保持原本退出登录的<code>window.close()</code>方法不变， 尝试增加打开按钮，点击后调用window.open()打开系统链接。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><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></pre>
</div>
<p>尝试结果：</p>
<ol>
<li><code>打开、退出功能全部正常</code>。</li>
<li>点击打开按钮，跳转到本地运行的此系统页面。</li>
<li>点击退出按钮，打开的页面关闭，并且基础的退出清除功能还在。</li>
</ol>
<p>判断： 主系统的打开方式没有问题，需要把焦点集中在此系统的window.close()失效上。</p>
<h3 data-id="heading-3">2. 在退出时，先手动打开一个新窗口，再关闭</h3>
<p>在搜索时发现了处理办法，先打开空白窗口触发window.open()，再close，试一下。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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(() => { });
}</pre>
</div>
<p>尝试结果： 无效。</p>
<h3 data-id="heading-4">3. 调试线上代码，验证是否跟环境有关</h3>
<p>在本地环境下的尝试都不成功的情况下，猜测是否跟环境有关，尝试调试线上代码。</p>
<h5 data-id="heading-5">第一步：定位调试文件</h5>
<p>根据退出功能中的提示词<code>确定注销并退出系统吗？</code>找到线上代码中退出按钮的所在文件</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250929195642406-403077512.png" alt="企业微信截图_20250929194958" loading="lazy"></p>
<h5 data-id="heading-6">第二步：创建存放代码的文件夹并允许修改</h5>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250929195652750-526377285.png" alt="企业微信截图_20250929195005" loading="lazy"></p>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250929195720153-1426210954.png" alt="企业微信截图_20250929195012" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250929195703875-1073077440.png" alt="企业微信截图_20250929195020" loading="lazy"></p>
<h5 data-id="heading-7">第三步：修改内容并保存</h5>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250929195734879-1868058337.png" alt="企业微信截图_20250929195035" loading="lazy"></p>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250929195741969-896370420.png" alt="企业微信截图_20250929195041" loading="lazy"></p>
<p> </p>
<h5 data-id="heading-8">第四步：刷新验证文件是否修改成功</h5>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250929195752258-1406802140.png" alt="企业微信截图_20250929195048" loading="lazy"></p>
<h5 data-id="heading-9">第五步：验证退出功能</h5>
<p>点击退出，页面关闭。</p>
<p>⚠️Tips：</p>
<ol>
<li>必须要打开调试器 --- 之前替换的内容才会生效。</li>
<li>在调试完成后，务必清除配置，以免对后续产生不必要的影响。</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250929195808599-1647883232.png" alt="企业微信截图_20250929195054" loading="lazy"></p>
<h3 data-id="heading-10">排查结果</h3>
<p>由此可得，window.open()的失效跟环境有关，待部署后的再测试。</p>
<p> </p>
<div>
<h2>本文转载于：https://juejin.cn/post/7555042405127487498</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19119425
頁:
[1]