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 ...
- Redis 入门 - 五大基础类型及其指令学习
经过前面Redis入门系列三篇文章学习,相信大家已经准备好学习新知识了,到这里也算是真正开始学习Redis了.学习了软件安装,客户端选择,那么接下来也应该来了解Redis有什么,能干什么. 我们在第一 ...
- sql转JSON为表
创建方法 : /****** Object: UserDefinedFunction [dbo].[parseJSON] Script Date: 2017/7/11 18:27:28 ******/ ...
- 面试被问到:fiddler 在工作中有哪些应用?怎么破?
作为软件测试工程师,如果你的简历中有涉及到 fiddler 这款工具,出去面试可能会被问到:fiddler 在工作中有哪些应用? 我们都知道 fiddler 是一款非常优秀的调试代理工具,用于记录客户 ...
- Maven 依赖项管理&&依赖范围
依赖管理 使用坐标导入jar包 1.在pom.xml 中编写 <dependencies> 标签 2.在 <dependencies> 标签中使用 < ...
- 【QT性能优化】QT性能优化之QT6框架高性能图形视图框架快速展示百万图元大规模场景
QT性能优化之QT6框架高性能图形视图框架快速展示百万图元大规模场景 简介: 本文展示了使用QT图形视图框架在一个场景中绘制出百万个图元的程序的效果以及源代码:本文还介绍了QT图形视图框架的一些实用功 ...
- 我发布了一款相亲平台《i相遇》
因缘际会之下,我踏入了相亲平台的领域.起初,是为一位客户打造专属相亲应用,过程中深入体验了众多同类平台,却遗憾地发现它们普遍掺杂着欺诈的阴影--高昂的费用.兼职托儿的身影.以及虚假的钓鱼信息,不一而足 ...
- 线段树与二分操作 vases and flowers ——hdu 4614
操作1,的关键是找到第一只和最后一只空花瓶,完全可以利用二分法查找,找第一只花瓶可以在[X,N]内查找,第一个位置pos1,最后一只花瓶则在[POS1,N]中找,然后更新[POS1,POS2],全部置 ...
- SpringBoot 集成 LDAP
LDAP协议具体是什么可以自行查看,简单来说就是单点登录的一种实现方式 LDAP只是一种协议,实现的有 openLDAP ,Microsoft active directory 等 openLDAP部 ...
- Linux cpuidle framework(1)_概述和软件架构
1. 前言 在计算机系统中,CPU的功能是执行程序,总结起来就是我们在教科书上学到的:取指.译码.执行.那么问题来了,如果没有程序要执行,CPU要怎么办?也许您会说,停掉就是了啊.确实,是要停掉,但何 ...