(转)postMessage使用方法

(转)postMessage使用方法postMessage使用方法

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

1、父页面向子页面发送消息
let data = {type: 'answerResult', data: jsonData.data};
this.$refs.iframe.contentWindow.postMessage(data, '*');

2、子页面向父页面发送消息
let parentData = {type: 'passDataBack', data: passData};
window.parent.postMessage(parentData, '*');
 
3、接收消息方法
window.addEventListener('message', function (e) {})

Jetbrains全家桶1年46,售后保障稳定

封装

// 父页面
mounted(){
    window.addEventListener("message", this.handleMessage)
},
methods:{
    /**
     * 向iframe传值的方法
     * @param {Object} data
     */
    sendMessage(data){
        const iframe = this.$refs.iframePage.contentWindow;
        iframe.postMessage(data, '*');
    },
    /**
     * 监听子页面传过来的值的方法
     * @param {Object} event
     */
    handleMessage (event) {
        // dosomething
    }
}

// 子页面
mounted(){
    window.addEventListener("message", this.handleMessage)
},
methods:{
    /**
     * 向父页面传值的方法
     * @param {Object} data
     */
    sendMessage(data){
        window.parent.postMessage(data, '*');
    }
    /**
     * 监听父页面传过来的值的方法
     * @param {Object} event
     */
    handleMessage (event) {
        // dosomething
    }
}

链接:https://www.jianshu.com/p/ae840f7d7f8b

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/223058.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 如何读取npy文件_mfc设置保存文件的类型

    如何读取npy文件_mfc设置保存文件的类型npy文件既可以保存数据也可以保存数据集(包括图片)下面只说保存简单数据实例:使用npy文件保存g_D_loss的数据,g_D_loss是一个元组,已经存入数据。withopen(‘./g_D_loss.npy’,’wb’)asf:np.save(f,g_D_loss)读取:file=”./g_D_loss.npy”…

  • 电商运营有前途吗?看看运营者的血泪史

    电商运营有前途吗?看看运营者的血泪史废话不说,进入正题,在知乎上,这个小伙是这么问滴:  题主男,今年25岁,大学学的是教育技术学(坑!),毕业三年一直从事教育行业,但本人并不喜欢。但对电商还是蛮感兴趣的,于是打算转行,前几天拿到了一个做小家电电商的offer,现在上班两天了,职位是运营助理,当然了,我的职业目标是电商运营。  介绍下这家公司,是做小家电的,有天猫,C店,1号店,京东等平台,从老板口中得知去年的营业额

  • idea激活码失效2021年4月最新注册码【在线注册码/序列号/破解码】

    idea激活码失效2021年4月最新注册码【在线注册码/序列号/破解码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • vivado2018.3 安装(包含license)

    vivado2018.3 安装(包含license)Xilinx采用的是ISE和vivado;Altera采用的是quartusII。vivado2018.3安装本次安装问题描述:(1)上一次上官网下的比较慢,官网链接:https://china.xilinx.com/support/download/index.html/content/xilinx/zh/downloadNav/vivado-design-tools.html…

  • 16 岁高中生成功将 Linux 移植到 iPhone,并贴出详细指南[通俗易懂]

    16 岁高中生成功将 Linux 移植到 iPhone,并贴出详细指南[通俗易懂]本文转载自InfoQ,作者李俊辰如果你的旧iPhone已经无法支持你日常使用了,你会怎么处理这部iPhone呢?卖掉还是留起来收藏呢?近日,国外一名16岁的小开发者在YouTube上发布了一则视频,展示了自己是如何将Linux移植到一部无法使用的iPhone7。2020年3月,Corellium提出了ProjectSandcastle,通过使用checkra1n越狱程序在iPhone上成功运行Android,激发了开发者对那些旧型号的iPhone.

  • 数据库的设计规范

    数据库的设计规范​1.为什么需要数据库设计2.范式在关系型数据库中,关于数据表设计的基本原则、规则就称为范式。可以理解为,一张数据表的设计结构需要满足的某种设计标准的级别。要想设计一个结构合理的关系型数据库

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号