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()
        });
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

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


相关推荐

  • 精美网站赏析_怎么收藏网址到收藏夹

    精美网站赏析_怎么收藏网址到收藏夹英文网站1链接地址享笑网个人博客交流网站蓝色网站商城黑色网站后台管理系统橙色企业信息管理系统韩国情侣酒店网站模板bootstrap制作的企业后台模板个人空间网站黑色主题网页

    2022年8月3日
    5
  • NumPy 文件存取 tofile,fromfile, load,save

    NumPy 文件存取 tofile,fromfile, load,save

    2020年11月8日
    193
  • java web servlet基础(PS教程)

    JavaWeb——ServletTomcat工作机制动画演示(点击动图可全屏观看)什么是ServletServlet(ServerApplet),全称JavaServlet,未有中文译文。是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据,生成动态Web…

    2022年4月10日
    32
  • 偏态分布学习笔记(期望,中位数,众数)

    偏态分布学习笔记(期望,中位数,众数)一:偏态函数分类(1)正态(期望=中位数=众数)(2)正偏态:也称为右偏态(期望>中位数>众数)(3)负偏态:也称左偏态(期望<中位数<众数)二:如何辨认正负偏态函数关键:看尾巴哪边长,左边尾巴长的成为左偏态(负偏态),反之右偏态(正偏态)三:关于期望,中位数,众数参考上面的草图:可以这样理解,(1)对于正偏态而言,数据大多分布在右侧,从而也就把期望与中位数往右侧移动。(2)对于负偏态而言,数据大多分布在左侧,从而也就把期望与中位数往左侧移动。…

    2022年9月13日
    3
  • 中国天气网-天气预报接口api

    中国天气网-天气预报接口api

    2021年9月25日
    54
  • 金三银四,教你编写一份脱颖而出的简历,从而 offer 手到擒来,要参加校招的同学要提前准备了「建议收藏」

    金三银四,教你编写一份脱颖而出的简历,从而 offer 手到擒来,要参加校招的同学要提前准备了「建议收藏」最近一段时间不是金三银四嘛,有不少同学通过CSDN私信的方式把简历发给我,要我给出一些建议。看多了以后,我发现,有些同学根本不知道怎么写简历,格式乱七八糟,填写的个人经历就像是记流水账一样,完全勾不起我的任何兴趣。那,招聘方应该比我更苛刻,所以这样的简历投递出去,石沉大海的几率很大啊。2014年,我从苏州回到了洛阳,那是我最后一次投简历,现在还在招聘网站上挂着——公开的。嗯,在这么多年的时间里,并没有招聘方和猎头通过这份挂出去的简历给我打电话,虽然我的联系方式一直没变。那只能说明一点,我当时写的简历

    2022年5月2日
    35

发表回复

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

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