????? 寫在開頭

點(dian)贊 + 收(shou)藏 === 學會??????

情況說明

1. 主系統單點登錄點擊觸發window.open()打開本系統。
2. 是發布生產后的新需求：要求退出登錄后直接關閉當前系統頁面。
3. 本地運行增加了window.close()方法實現功能，點擊退出后頁面沒反應。

排查過程

官方(fang)解(jie)析中說明，window.close() 方(fang)法只能(neng)關閉由window.open()或者瀏覽器直(zhi)接輸(shu)入url打開的頁面，其余情況(kuang)安全考慮是被(bei)限制的。

1. 驗證window.close()失效是否與window.open()觸發打開有關

于是保持原本退出登錄的window.close()方法不變， 嘗試增加打開按(an)鈕，點擊(ji)后(hou)調用(yong)window.open()打開系統鏈(lian)接。

<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('//localhost/web/index')  // 使用open方法打開
}
</script>

嘗試結果：

1. 打開、退出功能全部正常。
2. 點擊打開按鈕，跳轉到本地運行的此系統頁面。
3. 點擊退出按鈕，打開的頁面關閉，并且基礎的退出清除功能還在。

判斷(duan)： 主系(xi)統(tong)(tong)的打(da)開(kai)方式沒有問題，需(xu)要把焦點集中在此(ci)系(xi)統(tong)(tong)的window.close()失效上。

2. 在退出時，先手動打開一個新窗口，再關閉

在(zai)搜索(suo)時發(fa)現了處理辦法，先打(da)開空白(bai)窗(chuang)口(kou)觸發(fa)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(() => { });
}

嘗試結果(guo)： 無效。

3. 調試線上代碼，驗證是否跟環境有關

在(zai)本地環(huan)境(jing)下的嘗(chang)(chang)試(shi)都不成功的情況(kuang)下，猜測(ce)是否跟環(huan)境(jing)有(you)關，嘗(chang)(chang)試(shi)調試(shi)線上代碼。

第一步：定位調試文件

根據退出功能中的提示詞確定注銷并退出系統嗎？找到線上代碼中退出按(an)鈕的所(suo)在文件

第二步：創建存放代碼的文件夾并允許修改

第三步：修改內容并保存

第四步：刷新驗證文件是否修改成功

第五步：驗證退出功能

點擊退出，頁面(mian)關閉。

??Tips：

1. 必須要打開調試器 --- 之前替換的內容才會生效。
2. 在調試完成后，務必清除配置，以免對后續產生不必要的影響。

排查結果

由此(ci)可(ke)得，window.open()的失效跟環境有(you)關，待部署后的再測試。

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。