weex跨页面通信
需求:
A页面有表单和表格,点击表格中的按钮到B页面,B页面操作完毕,再次回到A页面,表单元素保持不变,表格内容刷新。
通过管道通信去做,用两个管道嵌套,A页面跳转到B页面的时候,直接用管道发过去,B页面收不到信息,需要B页面先告诉A页面可以传值了,A页面再传值。B页面再接收A页面传过来的值,操作页面完成后,再将数据通过另一个管道传回去。
A页面:
const fatherOK = new BroadcastChannel('fatherOK')
const fatherFormData = new BroadcastChannel('fatherFormData')
mounted() {
this.$next(() => {
fatherOK.onmessage = (e) => {
if (e.data.message == 'OK') {
fatherFormData.postMessage({ fatherData: this.infoForm })
}
},
fatherFormData.onmessage = (e) => {
if (e.data.fatherData) {
let fatherInfoForm = e.data.fatherData
if (fatherInfoForm) {
Object.assign(this.infoForm, fatherInfoForm)
this.handleSearch();
}
}
}
}
}
B页面:
const fatherOK = new BroadcastChannel('fatherOK')
const fatherFormData = new BroadcastChannel('fatherFormData')
mounted() {
this.$next(() => {
fatherFormData.onmessage = (e) => {
this.fatherData = e.data.fatherData;
},
fatherOK.postMessage({message:"OK"});
}
}
给A页面的传值:
fatherFormData.postMessage({fatherData: this.fatherData})
weex跨页面通信的更多相关文章
- [转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...
- window.frames && iframe 跨页面通信
1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法 假设iframe 是一个以存在的 iframe 的 ID 和 ...
- 【JavsScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- 【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- html5 postMessage解决iframe跨协议跨域通信问题
a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...
- 对iframe跨域通信的封装
github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...
- JavaScript 跨域:window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- 使用 JSONP 实现跨域通信
简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...
- Html5 跨域通信
H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 ...
随机推荐
- 万字长文全面详解现代C++智能指针:原理、应用和陷阱
现代C++智能指针详解:原理.应用和陷阱 智能指针是C++11引入的新特性.本篇文章详细介绍了C++智能指针的原理.应用与陷阱,通过丰富的代码实例介绍了三种智能指针:std::unique_ptr.s ...
- CSS & JS Effect – Section Design Waves
介绍 Section Waves 长这样 左边是没有 waves, 右边是加了 waves. 它的作用就是点缀. 让画面有一点 "Design" 的感觉. 参考 You ...
- webpack 5.88.2
原理 webpack的运行过程大致可以分为以下几个步骤:webpack的运行过程实际上就是等待上一个钩子结束调用下一个钩子的过程 初始化:webpack接收命令行参数或配置文件,创建一个Compile ...
- GPUStack 0.2:开箱即用的分布式推理、CPU推理和调度策略
GPUStack 是一个专为运行大语言模型(LLM)设计的开源 GPU 集群管理器,旨在支持基于任何品牌的异构 GPU 构建统一管理的算力集群,无论这些 GPU 运行在 Apple Mac.Windo ...
- QT数据可视化框架编程实战之三维散点图从入门到精通_补天云QT技术培训专家
简介 本文将介绍支持GPU图形硬件加速的QT数据可视化框架编程实战之三维散点图从入门到精通_补天云QT技术培训专家.本文将创建一个含有三个序列的三维散点图,同时设定了坐标轴的标题和标签,使得用户点击表 ...
- Adobe Pr 软件报错,此效果需要GPU加速
事件起因: 某同事使用PR软件报错,报错截图如下: 解决办法: 1.在pr菜单栏选择文件-项目设置-常规-视频渲染和回放-渲染程序,切换到Mercury Playback Engine GPU加速 ...
- 阿里邮箱网页正常登陆,outlook报错
事件起因: 某客户使用阿里邮箱办公,然又使用outlook绑定阿里邮箱:在网页端可以登录阿里邮箱,但是在outlook的登录的时候,服务器.端口均设置无误,但是就是登录不上去,死活都等登录不上去,总是 ...
- 配置windows update失败还原更改
配置windows update失败还原更改_解决方案 解决方法: 方法1: 重启,按F8,选择最后一次正常启动. 如果还是需要等待.可采用方法2: 方法2: 重启,按F8,选 ...
- 7-11 leetcode 2619
请你编写一段代码实现一个数组方法,使任何数组都可以调用 array.last() 方法,这个方法将返回数组最后一个元素.如果数组中没有元素,则返回 -1 . ps:this 环境变量的使用 ,this ...
- .NET云原生应用实践(二):Sticker微服务RESTful API的实现
本章目标 完成数据访问层的基本设计 实现Sticker微服务的RESTful API 引言:应该使用ORM框架吗? 毋庸置疑,Sticker微服务需要访问数据库来管理"贴纸"(也就 ...