(转)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

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 无穷小分析理论_无穷小是一个过程

    无穷小分析理论_无穷小是一个过程一般读者对无穷小微积分只是略知一二,其实这是不够的。现将有关文章引用如下,供读者参考。袁萌 12月23日非标准分析概念又可称为实无穷小分析)(英语:Non-standardanalysis)是一个数学分支,它用严格定义的无穷小的数(infinitesimalnumber)的概念来构建数学分析大厦。1历史2动机2.1历史上的原因2.2教学上的原因2.3技术上的原因3无穷小分析的各种建立

    2022年8月11日
  • Spark Streaming Join

    Spark Streaming Join多数据源Join思路多数据源Join大致有以下三种思路:数据源端Join,如Android/IOS客户端在上报用户行为数据时就获取并带上用户基础信息。计算引擎上Join,如用SparkStreaming、Flink做Join。结果端Join,如用HBase/ES做Join,Join键做Rowkey/_id,各字段分别写入列簇、列或field。三种思路各有优劣,使用时注意…

    2022年6月30日
  • af-s af-f_read fpdma queued

    af-s af-f_read fpdma queued1.PDAF驱动功能验证1.1pdaflog设置log设置,打开AF(8),State(2),Sensor(2)的logCT30P:/#cat/vendor/etc/camera/camxoverridesettings.txtoverrideLogLevels=0x3FlogWarningMask=0x08000202logInfoMask=0x08000202logVerboseMask=0x08000202enable3ADebugData=TRUEdumpSens

    2022年9月7日
  • 运算放大器工作原理

    运算放大器工作原理运算放大器工作原理作者:何富和时间:2015-03-22来源:电子产品世界  运算放大器基本上可以算得上是模拟电路的基本需要了解的电路之一,而要想更好用好运放,透彻地了解运算放大器工作原理是无可避免,但是运放攻略太多,那不妨来试试这篇用电路图作为主线的文章来带你领略运算放大器的工作原理吧。本文引用地址:http://www.eepw.com.cn/article/271351.htm1.运算放

    2022年4月28日
  • OpenCV 如何保存图片「建议收藏」

    OpenCV 如何保存图片「建议收藏」里主要说明两种图片格式cv::Mat以及IplImage如果图片是以Mat类型的格式表示的话,那么保存图片则用imwrite()函数举例如下:constchar*path;path=”E:\\Data\\right\\right.bmp”imwrite(path,riFrame);//riFrame为当前帧如果图片是以IplImage类型的格式表示的话,

    2022年6月29日
  • DMA控制器8237A「建议收藏」

    DMA控制器8237A「建议收藏」1DMA系统简介DMA(directmemoryaccess)是一种外设与存储器或者存储器与存储器之间直接传输数据的方式,在进行DMA存取时,CPU让出总线控制权,不在采用输入输出指令的方法进行数据存取,而采用一个专门的硬件DMAC(DirectMemoryAccessControl)控制电路,减少了中间环节,从而提高了传输速率。1.1DMA基本原理DMA直接实现I/O与存储器之间的数据传送。①当I/O接口准备好,希望进行DMA操作时,就像DMAC发出DMA请求信号DRQ(DMARe

    2022年5月18日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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