需求:

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. vue 根据div id 滚动到指定view到可视视图中

    <div id="name" @click="scrollToViewById('name')"> ...... </div> scro ...

  2. error: rpmdb: BDB0113... rpm安装或尝查询时报错

    等保要求安装杀毒软件,我跑脚本的时候发现异常退出了,一查芜湖,rpm管理包出问题了 root@VM_0_12_centos equal-protection]# rpm -g clamav error ...

  3. CSS & JS Effect – Image Overlay

    介绍 一张背景图, 一行写字, 一层黑影 (Image Overlay), 如果没有做黑影, 字的颜色容易和图片撞, contrast 就会很烂. HTML 结构 <div class=&quo ...

  4. Figma 学习笔记 – Color

    大纲 Figma 的颜色是通过 FIll 实现的 (Fill 还有其它功能比如 fill 图片) 整体大概长这样, 我们一个一个看 颜色和 opacity

  5. 一款超级给力的弱网测试神器—Qnet(附视频)

    一.APP弱网测试背景 App在使用的过程中,难免会遇到不同的弱网络环境,像在公车上.在地铁.地下车库等.在这种情况下,手机常常会出现网络抖动.上行或下行超时,导致APP应用中出现丢包延迟,从而影响用 ...

  6. OAuth2.0授权-gitee授权码模式

    OAuth2.0授权验证-gitee授权码模式 本文主要介绍如何笔者自己是如何使用gitee提供的OAuth2.0协议完成授权验证并登录到自己的系统,完整模式如图 1.创建应用 打开gitee个人中心 ...

  7. php生成验证码类

    php生成验证码类 直接看代码 <?php session_start(); class Code{ //资源 private $img; //画布宽度 private $width=100; ...

  8. C#中的原始字符串

    // 原始字符串使用 三个引号(至少三对)包裹,ps: 引号单独占用一行 // 原始字符串使用变量需要加两个 $$"""{变量}""" st ...

  9. Vnode 是什么 ,什么是虚拟DOM ?

    Vnode 是 JavaScript 对象,就是把标签结构的信息描述成js对象 : Vnode 的作用:通过 render 函数 将 template 描述成 Vnode ,然后通过一系列操作转换真实 ...

  10. 14. Vue2 和 Vue3 区别

    主要分为四点: 1. Vue3 使用了 proxy 替代了 Object.defineProperty 实现响应式数据 ,所以 vue3 的性能得到了提升 : 2. Vue3 可以在 template ...