標籤頁間通訊——開啟新標籤頁並跳轉第三方地址

Karle發表於2024-04-18

場景

app webView物件，開啟一個H5頁面，該H5點選一個按鈕，會進行頁面跳轉

但是開啟了一個新的標籤頁，並且顯示為about:blank

如果是用瀏覽器進行相同操作，流程正常進行

解決

檢視該H5頁面原始碼：

function f() {
	$('.boton_azul').on('click', function (e) {
		popupBank = window.open('about:blank', popupName)
		popupBank.focus()
	})
}

透過window.open()開啟空白標籤頁，並且返回該物件，最後展示該頁面。

由於只能看到這段程式碼，無法檢視popup物件的處理函式，可以進行猜測：

利用了postMessage()進行標籤頁通訊，將新的Url地址傳給了popup，popup監聽到資料傳輸後進行頁面跳轉

大致實現：

const popup = window.open('about:blank')
const changePopUpUrl = () => {
	popup.addEventListener('message', (event) => {
		const { data } = event
		popup.location.href = data
	})
	popup.postMessage('https://www.baidu.com', '*')
	popup.focus()
}
changePopUpUrl()

最後因為Webview沒有做多標籤頁，所以開啟新的標籤頁就會覆蓋掉舊的webview，導致無法對popup物件進行處理

相關文章