首页 > 其他分享 >js浏览器通信postMessage

js浏览器通信postMessage

时间:2023-09-14 17:35:27浏览次数:38  
标签:postMessage 外层 浏览器 sign window js data event

1、背景:一个应用中内嵌了iframe,外层应用需要知道iframe做了一些具体的操作来更新页面,所以需要用到postMessage

2、代码模块

  发起方:

window.parent.postMessage({
      type: 'sign-event', //事件名,内外层统一
      data: {
        data: data //需要传递的参数
      },
    },
      '*',); //*号表示向全局发送

  接收方:

window.addEventListener('message',(e)=>{
      if(e?.data?.type === 'sign-event'){  //内外层统一的事件类型
        //todo
        // console.log(e.data.data) //传递的数据,可以打印e看参数
      }
    })

  

 

标签:postMessage,外层,浏览器,sign,window,js,data,event
From: https://www.cnblogs.com/cb1490838281/p/17702957.html

相关文章

  • CSS gradient渐变之webkit核心浏览器下的使用
    [color=red][b]一、关于渐变[/b][/color]渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色。渐......
  • requests中post参数data和json区别:
    HTTP协议规定将一个完整的HTTP请求分为三个部分:请求头、请求行、请求体 大概框架如下: <method><request-URL><version> <headers> <body> POSThttp://httpbin.orgHTTP/1.1 Content-Type:application/x-www-form-urlencoded;charset=utf-8 a_test=112233&b_test=223......
  • vue 数学公式js加载
    <script>document.addEventListener("DOMContentLoaded",function(){renderMathInElement(document.body,{//customisedoptions//•auto-renderspecifickeys,e.g.:delimiters:[{left:'$......
  • js:上传图片,通过file对象或blob对象获取用于显示的url,获取图片的base64编码;限制文件类
    1//URL.createObjectUrl(file):同步执行;创建一个指向file/blob对象的url,可用于元素的src/href属性23//fileReader.readAsDataURL():异步执行;读取file/blob对象的内容,result属性将返回一个包含data:URL格式的base64字符串45//fileReader.readAsDataURL()是异步的,所......
  • JSP页面实现上传下载
     本文使用的是smartupload工具实现文件的上传下载:工具:1、Eclipse2、jspsmart.jar(百度搜索jspsmartupload.jar下载) JSP页面: 1<%--上传--%> 2<formaction="upload"method="post"enctype="multipart/form-data"> 3<inputtype="file&quo......
  • nodeJs读取JOSN文件导出多个word文件
    前言最近遇到一个需求,读取JOSN文件,以JSON文件的标题为word的文件名导出多个文档,利用nodeJs和 officegen实现了该功能exportWords.js代码如下/***读取指定文件夹下的JSON文件,导出多个word文件*一个json文件导出多个word文件,通常以json文件中的title作为导出的word的文......
  • @JsonSerialize @JsonDeserialize @JsonFormat 三个注解的区别及一般用法
    三个注解区别@JsonSerialize:该注解用于指定在将Java对象序列化为JSON字符串时使用的序列化器。可以将其应用于字段、方法或类级别。通过@JsonSerialize注解,可以自定义序列化过程,例如将日期格式化为特定的字符串、将枚举类型序列化为其名称而不是值等。@JsonDeserialize:该注解用......
  • JS 的6种加载方式
    一、正常模式<scriptsrc="index.js"></script>这种情况下JS会阻塞dom渲染,浏览器必须等待index.js加载和执行完成后才能去做其它事情二、async模式<scriptasyncsrc="index.js"></script>async模式下,它的加载是异步的,JS不会阻塞DOM的渲染,async加载是无顺序......
  • nodeJS读取JSON文件导出word文档
    前言最近遇到一个需求,将JSON文件的内容,导出到word文档,利用nodeJs和Officegen实现了文件导出的功能exportAWord.js代码如下/***读取指定文件夹下的JSON文件,导出为word*一个json文件为一个word,以json文件的名称为word文件的名称*/letfs=require("fs");letpath=......
  • MySQL Node.js mysql 事务
    MySQLNode.jsmysql事务在MySQL数据库中,事务(transaction)是一组原子性操作,要么全部执行成功,要么全部回滚回去。在多用户并发环境中,事务可以保护数据的一致性和完整性。MySQL提供了ACID属性,并且支持事务。Node.js中,可以通过使用mysql模块的连接来实现事务。什么是事务在MySQL数......