需求:

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跨页面通信的更多相关文章

  1. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  2. window.frames && iframe 跨页面通信

    1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法 假设iframe 是一个以存在的 iframe 的 ID 和 ...

  3. 【JavsScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  4. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  5. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  6. html5 postMessage解决iframe跨协议跨域通信问题

    a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...

  7. 对iframe跨域通信的封装

    github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...

  8. JavaScript 跨域:window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  9. 使用 JSONP 实现跨域通信

    简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...

  10. Html5 跨域通信

    H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 ...

随机推荐

  1. js玩儿爬虫

    前言 提到爬虫可能大多都会想到python,其实爬虫的实现并不限制任何语言. 下面我们就使用js来实现,后端为express,前端为vue3. 实现功能 话不多说,先看结果: 这是项目链接:https ...

  2. spark 中时间和日期 操作,怎么找到前几天后几天

    1. timestamp 增加减少一个 time delta df.withColumn("added_hours",col("input_timestamp" ...

  3. C# SAPX调用用户控件方法

    //获得用户控件            Type pageType = ucMoneyList1.GetType();             //用户控件方法名            MethodI ...

  4. 基于 Session 实现短信登录

    短信验证 一.基于Session 1.登录流程 1)发送验证码 用户在提交手机号后,会校验手机号是否合法,如果不合法,则要求用户重新输入手机号 如果手机号合法,后台此时生成对应的验证码,同时将验证码进 ...

  5. 面试官的几句话,差点让我挂在HTTPS上

    作为软件测试,大家都知道一些常用的网络协议是我们必须要了解和掌握的,比如 HTTP 协议,HTTPS 协议就是两个使用非常广泛的协议,所以也是面试官问的面试的时候问的比较多的两个协议:而且因为这两个协 ...

  6. Servlet——执行流程、生命周期、方法介绍、体系结构

    执行流程    生命周期 对象的生命周期是指一个对象从被创建到被销毁的整个过程 Servlet运行在Servlet容器(web服务器)中,其生命周期由容器管理,分为四个阶段:     1. 加载和实例 ...

  7. 【QT性能优化】QT性能优化之QT性能优化实战 QML优化 QT高性能 QT6系列视频课程 QT6 性能优化实战 QT高性能 QT原理源码 QML优化 GUI绘图原理源码

    QT性能优化实战视频课程 QT6 Widgets高性能应用编程 1.课前考试 2.字符串优化(上) 3.字符串优化(下) 4.绘图优化(上) 5.绘图优化(下)  6.QT界面优化(上) 7.QT界面 ...

  8. 系统编程-进程-vfork使用、浅析

    1. 先贴代码 #include <stdio.h> #include <stdlib.h> #include <unistd.h> int globvar = 6 ...

  9. 2024csps初赛记

    对于此次初赛,教训有不少,有一些差点把自己整死. 第一点,铅笔只能用2B,不要尝试使用HB 2nd:一定要带涂卡笔和橡皮,不然就算借别人用了也会发现橡皮还不如手擦的干净(可能因为这个原因我都要丢几分) ...

  10. 交通网络分析性能再升级,SuperMap iServer新增开启SSC分析模型

    导语 SSC分析模型,全名SuperMap Short Cut,底层采用Contraction Hierarchies(简称CH)算法,该算法旨在通过对图形进行预处理和优化来降低最佳路径分析的时间复杂 ...