动态

详情 返回 返回

記錄---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. 調試線上代碼,驗證是否跟環境有關

在本地環境下的嘗試都不成功的情況下,猜測是否跟環境有關,嘗試調試線上代碼。

第一步:定位調試文件

根據退出功能中的提示詞確定註銷並退出系統嗎?找到線上代碼中退出按鈕的所在文件

企業微信截圖_20250929194958

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

企業微信截圖_20250929195005

 

企業微信截圖_20250929195012

企業微信截圖_20250929195020

第三步:修改內容並保存

企業微信截圖_20250929195035

 

企業微信截圖_20250929195041

 

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

企業微信截圖_20250929195048

第五步:驗證退出功能

點擊退出,頁面關閉。

⚠️Tips:

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

企業微信截圖_20250929195054

排查結果

由此可得,window.open()的失效跟環境有關,待部署後的再測試。

 

本文轉載於:https://juejin.cn/post/7555042405127487498

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

user avatar yulong1992 头像 congjunhua 头像 mandy_597086799bac8 头像 b_a_r_a_n 头像 gssggssg 头像 lxlu 头像 libubai 头像 wqjiao 头像 awbeci 头像 baidusecrity 头像 aiyaotoudedianfengshan 头像 esunr 头像
点赞 14 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.