(转)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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python数组-1成员_python[1,2,3]*3

    python数组-1成员_python[1,2,3]*3使用python版本3.7首先先了解下python3.7中的下标,python下标有两套,一套是正的,一套是负的a=’python’中的python的下标可以如下组python正下标012345负下标-6-5-4-3-2-1对应位置的正下标-负下标=len(a)使用正下标时,下标i………………………

    2022年8月13日
    7
  • 微信公众号网页开发使用 WeUI优势

    微信公众号网页开发使用 WeUI优势WeUI是一套同微信原生视觉体验一致的基础样式库,WeUI由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。在微信网页或小程序中使用WeUI的优势1.同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站和小程序2.方便用户便捷获取快速使用,降低公众号和三方开发者的开发和设计成本。3.WeUI是微信设计团队精心打造,清晰明确,简洁大方。WeUI…

    2022年5月7日
    212
  • 京东-n头熊分苹果「建议收藏」

    京东-n头熊分苹果「建议收藏」果园里有一堆苹果,一共n头(n大于1小于9)熊来分,第一头为小东,它把苹果均分n份后,多出了一个,它扔掉了这一个,拿走了自己的一份苹果,接着第二头熊重复这一过程,即先均分n份,扔掉一个然后拿走一份,以此类推直到最后一头熊都是这样(最后一头熊扔掉后可以拿走0个,也算是n份均分)。问最初这堆苹果最少有多少个。给定一个整数n,表示熊的个数,返回最初的苹果数。保证有解。测试样例:2返回:3

    2022年10月12日
    2
  • 清博舆情系统_什么是舆情

    清博舆情系统_什么是舆情1. 引言1.1 编写目的  编写此文档的目的是确认微博舆情分析系统的基本架构,指导系统的基本架构。1.2 项目信息项目名称:舆情分析系统项目提出者:指导教师开发者:东北大学软件学院大数据班T09实训项目组(lzf、lcx)用户:舆情分析员、系统管理员1.3 项目背景  互联网的飞速发展促进了很多新媒体的发展,不论是知名的大V,明星还是围观群众都可以通过手机在微博,朋友圈或者点评网站上发表状态,分享自己的所见所想,使得“人人都有了麦克风”。不论是热点新闻还是娱乐八卦,传播速度远超我们

    2022年9月20日
    2
  • linux杀死进程的五种方法「建议收藏」

    linux杀死进程的五种方法「建议收藏」方法一:Terminal终端输入:gnome-system-monitor,就可以打开systemmonitor如图:然后找到相应进程,右击选择killprocess就可以了方法二:通过kill进程id的方式可以实现,首先需要知道进程id,例如,想要杀死firefox的进程,通过ps-ef|grepfirefox,可以查到firefox的进程

    2022年9月29日
    2
  • 三巨头是什么意思(腾讯财报)

    5月22日晚间,拼多多与阿里巴巴相继公布了财报,拼多多一季度营收同比增长44%,阿里营收则同比增22%,都好于市场预期。而从电商业务来看,阿里虽一直领先于京东与后来者拼多多,但由于家大业大,业务链分散,使得另外两家有了后来居上的机会,拼多多今天的财报中提及了其年度活跃用户已达到了6.28亿,京东近期也在物流方面频频发力,并在上周交出了一季度亮眼的财报,这使…

    2022年4月16日
    72

发表回复

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

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