首页 > 其他分享 >标签页间通信——打开新标签页并跳转第三方地址

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

时间:2024-04-18 18:22:13浏览次数:25  
标签:popup 标签 blank 间通信 跳转 打开 页面

场景

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

标签:popup,标签,blank,间通信,跳转,打开,页面
From: https://www.cnblogs.com/karle/p/18144171

相关文章

  • HarmonyOS NEXT应用开发之Tab组件实现增删Tab标签
    介绍本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。该场景多用于浏览器等场景。效果图预览使用说明:点击新增按钮,新增Tab页面。点击删除按钮,删除Tab页面。实现思路设置Tab组件的barHeight为0,隐藏组件自带的TabBar。Tabs(){...}.barHeight(0)//隐藏tab......
  • ggplot 中绘图设置 轴标签和标题与绘图区域的间距
     001、基础绘图library(ggplot2)p<-ggplot(faithful,aes(x=eruptions,y=waiting))+geom_point()p 002、调整标签刻度到绘图区域的间距p+theme(axis.text.x=element_text(vjust=-8))##调整x标签刻度到绘图区域的间距 003、调整绘......
  • vim中函数跳转的功能实现
    左手编程,右手年华。大家好,我是一点,关注我,带你走入编程的世界。公众号:一点sir,关注领取编程资料介绍函数跳转是要给IDE中非常重要也非常常用的功能,而原生的Vim并不提供这个功能,这个确定有点让人遗憾,按理说这么常用的功能应该是要提供的。但是没有关系,有插件可以实现这样的功......
  • 借助Messenger实现ViewModel间通信(communitytoolkit-mvvm)
    两个VM:MainViewModel,TestViewModel需求:TestViewModel中发消息到MainViewModel处理写法1:  1.MainViewModel中注册消息处理函数WeakReferenceMessenger.Default.Register<string,string>(this,"AddItem",DoMessage)  2.参数2用于校验,参数3为消息处理函数  3.TestViewM......
  • pyecharts实现点击省跳转省地图
    诶呀我去太感谢了终于找到实现点击地图省份实现跳转了。参考:利用pyecharts实现中国省与市之间的跳转_pyecharts点击地图跳转-CSDN博客 需要注意的问题:1.如果想在全国地图显示数据,data数据中要用如:北京市、广东省、香港特别行政区、内蒙古自治区,这种带有后缀的。(可能有些不需......
  • LayUI弹窗确定后获取子页面的值(如获取UEditor富文本的内容,或input标签内容)
    LayUI弹窗确定后获取子页面的值(如获取UEditor富文本的内容,或input标签内容)子窗体JS代码<scriptsrc="~/lib/ueditor-1.4.3.3/ueditor.config.js"></script><scriptsrc="~/lib/ueditor-1.4.3.3/ueditor.all.js"></script><script>varue=UE.......
  • 在MyBatis中,可以使用以下动态SQL标签来编写灵活的SQL语句
    一、<if>:条件判断标签,用于在SQL语句中添加条件判断。通过判断给定的条件是否成立,决定是否包含相应的SQL片段。示例:<selectid="getUserList"resultType="User">SELECT*FROMuser<where><iftest="username!=null">ANDusername=#{userna......
  • HarmonyOS-基础之页面跳转
    1、配置页面路由信息resources-->base-->profile-->main_pages.json{"src":["pages/demo03/Index","pages/demo03/Detail"]}2、编写页面组件Index.ets/***路由跳转*-使用鸿蒙内置的router*/importrouterfrom'......
  • Linux架构29 ansible playbook任务标签, 复用文件, 忽略错误, 错误处理
    四、playbook任务标签1.标签的作用默认情况下,Ansible在执行一个playbook时,会执行playbook中定义的所有任务,Ansible的标签(tag)功能可以给单独任务甚至整个playbook打上标签,然后利用这些标签来指定要运行playbook中的个别任务,或不执行指定的任务。2.打标签的方式1.对一个tas......
  • php去掉字段文本的所有html标签
    方法1:php内建函数strip_tags()除去HTML标签<?phpheader("content-type:text/html;charset=utf-8");functionstrip_html_tags($str){$pattern='/<("[^"]*"|\'[^\']\*\'|[^>"\'])*>......