記錄---window.close()失效 + Chrome瀏覽器調試線上代碼

????? 寫在開頭

點贊 + 收藏 === 學會??????

情況說明

主系統單點登錄點擊觸發window.open()打開本系統。
是發布生產后的新需求：要求退出登錄后直接關閉當前系統頁面。
本地運行增加了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>

嘗試結果：

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

判斷：主系統的打開方式沒有問題，需要把焦點集中在此系統的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(() => { });
}

嘗試結果：無效。