标签页间通信——打开新标签页并跳转第三方地址
场景
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对象进行处理
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步