react中postMessage与addEventListener的使用

react中postMessage与addEventListener的使用有时候两个页面之间不是父子组件的情况下,信息交互很难搞,看到有人用postmessage来进行消息交互,我也试了一下,哎呀妈真香!!!1、首先在需要发送消息的界面中使用postMessage使用的是React+TypeScript,逻辑是更新提交的时候刷新打开当前页面的父窗口,postMessage用法如下:if(window.opener&&window.opener.location&&window.opener.location.href){

大家好,又见面了,我是你们的朋友全栈君。

有时候两个页面之间不是父子组件的情况下,信息交互很难搞,看到有人用postmessage来进行消息交互,我也试了一下,哎呀妈真香!!!

1、首先在需要发送消息的界面中使用postMessage

使用的是React+TypeScript,逻辑是更新提交的时候刷新打开当前页面的父窗口,postMessage用法如下:

if (window.opener && window.opener.location && window.opener.location.href) { 
   
                        let origin = window.opener.location.href;
                        let originStr = origin.substring(origin.length - 21, origin.length);
                        if (origin.indexOf("/tankInfoManage/valve") != -1) { 
   
                            window.opener.postMessage("message", origin)
                        }
                        window.close();
                    }

2、接收消息

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

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

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

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

(0)


相关推荐

  • 如何更好的使用谷歌搜索引擎加速器_国外搜索引擎

    如何更好的使用谷歌搜索引擎加速器_国外搜索引擎搜索引擎命令大全!1、双引号把搜索词放在双引号中,代表完全匹配搜索,也就是说搜索结果返回的页面包含双引号中出现的所有的词,连顺序也必须完全匹配。bd和Google都支持这个指令。例如搜索:“seo方法图片”2、减号减号代表搜索不包含减号后面的词的页面。使用这个指令时减号前面必须是空格,减号后面没有空格,紧跟着需要排除的词。Google和bd都支持这个指令。例如:搜索-引擎返回的则是包含“搜索”这个词,却不包含“引擎”这个词的结果3、星号星号*是常用的通配符,也可以用在搜索中。百

  • pycharm2021专业版激活码【2021最新】

    (pycharm2021专业版激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • CGI与FastCGI

    CGI与FastCGI

    2021年10月27日
  • 10分钟拿下 HashMap「建议收藏」

    10分钟拿下 HashMap「建议收藏」请相信我,你一定会更优秀!文章目录:1、什么是HashMap?什么时候选择HashMap?2、HashMap数据结构及其工作原理?2.1数据结构2.2工作原理3、HashMap和HashTable的异同?4、如何优化HashMap?1、什么是HashMap?什么时候选择HashMap?说到容器,你肯定会想到Java中对象存储容器还有Arr…

  • Java Eclipse下载安装教程[通俗易懂]

    Java Eclipse下载安装教程[通俗易懂]一、下载:(1)Eclipse是一个开放源代码的项目,其官方网站是www.eclipse.org(2)从首页中单击DOWNLOAD按钮,进入图2所示的页面。(3)点击DownloadPackages,进入Eclipse下载页面。从EclipseIDEforJavaEEDevelopers后面选择适合当前系统的版本,这里单击64bit按钮,…

  • 奉劝各位学弟学妹们,该打造你的技术影响力了!

    奉劝各位学弟学妹们,该打造你的技术影响力了!CSDN的学弟学妹们,大家好呀,我是沉默王二。放在一年前,打死我也不相信,这四个平淡无奇的字组合在一起竟然充满了魔力!2019年的时候,我看过一本书,名叫《影响力》,应该有不少学弟学妹也看过。但说实在的,这本书我就看了几页,就看不下去了,不是这书不好,而是我觉得它不适合我,因为我那时候没什么影响力(谦虚点)。没有影响力的时候想着怎么扩大影响力,我就觉得有点扯淡。就像没有财的时候想着理财一样,有点白日做梦。与其白日做梦,不如脚踏实地,换一句浅显易懂的话,就是,与其想着理财,不如想想怎么攒钱。如果连原

发表回复

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

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