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 ...
随机推荐
- SVG Video 声音图标灰色,无法点击
原因:Video里的视频放的是录屏,怪不得声音图标是灰色的 换成正常有声音的mp4文件,声音图标就正常了
- 第二章:智能Agent
第二章:智能Agent 本章讨论Agent的本质,Agent是否完美,环境的多样性,及由此带来的各种Agent分类. 1. Agnet和环境 Agent通过传感器感知环境并通过执行器对所处环境产生影响 ...
- C++: 16个基础的C++代码性能优化实例
前言 近期推动项目屎山代码进行了一波性能优化,实现了较大的性能提升.这里记录了部分近期代码优化的小技巧,这些例子仅从C++语言层面进行优化,主要在于优化类设计.减少隐含函数调用.减少拷贝等,较为基础实 ...
- 科技助力上亿用户隐私安全保护,合合信息两款产品再获CCIA PIA星级标识
随着互联网技术的飞速发展,个人信息的收集.存储.使用和传输变得日益频繁,其泄露和滥用的风险也随之增加,个人信息保护已成为社会共同关注的热点议题.近期,"中国网络安全产业联盟(CCIA)数据安 ...
- 扫描全能王启动鸿蒙原生应用开发,系HarmonyOS NEXT智能扫描领域首批
近期,"鸿蒙合作签约暨扫描全能王鸿蒙原生应用开发启动仪式"(简称"签约仪式")正式举行.合合信息与华为达成鸿蒙合作,旗下扫描全能王将基于HarmonyOS NE ...
- MySQL 大表拆分
概述 在实际工作中,在关系数据库(MySQL.PostgreSQL)的单表数据量上亿后,往往会出现查询和分析变慢甚至无法执行统计分析的情况.这时就需要将大表拆分为多个小表,将小表分布在多个数据库上,形 ...
- MyBatis——案例——查询-多条件查询(多参数接收的三种方法)
查询-多条件查询 编写接口方法:Mapper接口 参数:所有条件查询 List<Brand> selectByCondition(int status,String com ...
- Spring —— 事务简介
Spring 事务 简介 事务作用:在数据层保障一系列的数据库操作同成功同失败 Spring事务作用:在数据层或业务层保障一系列的数据库操作同成功同失败 小案例 添加事务管理: ...
- Dart 2.14 版现已发布
支持 Apple Silicon,增加了默认的 lint.更好的工具和新的语言功能提高生产力. 本月,我们发布了 Dart SDK 2.14 的正式版,新的版本旨在通过独特的可移植性.生产力和稳健性组 ...
- SimpleRAG-v1.0.3:增加文件对话功能
Kimi上有一个功能,就是增加文件之后对话,比如我有如下一个私有文档: 会议主题:<如何使用C#提升工作效率> 参会人员:张三.李四.王五 时间:2024.9.26 14:00-16:00 ...