标签页间通信——打开新标签页并跳转第三方地址

场景

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对象进行处理