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)
上一篇 2022年7月12日 下午7:00
下一篇 2022年7月12日 下午7:00


相关推荐

  • Vue调试工具安装(vue devtools)

    Vue调试工具安装(vue devtools)Vue调试工具安装(vuedevtools)第一步:下载源码第二步:执行命令第一步:下载源码在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools。第二步:执行命令下载好后进入vue-devtools-master工程执行cnpminstall,下载依赖,然后执行npmrunbuild,编译源程序。cmd回车后进入到vuedevtools的安装目录下。执行命令:(1)…

    2025年6月9日
    11
  • 开了一把奥地利站

    开了一把奥地利站

    2021年7月21日
    71
  • 12306 抢票 仅供参考(以后会进行修改)

    12306 抢票 仅供参考(以后会进行修改)coding utf 8 importreques parseimportt requests Session headers User Agent Moz

    2026年3月19日
    1
  • 小鹤双拼入门和小鹤音形的搜狗输入法配置方法[通俗易懂]

    小鹤双拼入门和小鹤音形的搜狗输入法配置方法[通俗易懂]记忆口诀秋闱皒软月,韵书迟落撇。阿宋穷带份羹,航岸快赢良况。邹霞夸草追鱼滨,鸟眠小鹤双拼。iueieuanue,unui_oie图月,书痴aongaieneng,anganing_ang建安,快赢,良况ou_aaouiin,iaoian瞎夸,追鱼记忆口诀①(官方版):QiuWeiRuanT_ue_veYunU_shuI_chiSong_iongDaiFenGengHangJ_an秋闱软月云梳翅,松拥

    2022年6月29日
    205
  • CListCtrl大数据显示[通俗易懂]

    CListCtrl大数据显示[通俗易懂]CListCtrl是个很方便的东西,但是当数据大到一个程度(比如说10万条数据),显示速度就会非常的慢。解决办法就是用虚拟列表。CListCtrl显示数据的原理是将需显示的所有数据拷贝在它内部的一块空间里,然后显示出来。一但数据量过大,拷贝的时间就会延长,显示速度当然也就非常慢了。而虚拟列表则不需要将显示数据拷贝到内部空间,它的做法是当需要显示某个数据时,才将数据拷入内部空间。看上去好像和普通CLi

    2022年6月23日
    29
  • 数组转集合集合转数组_集合转json

    数组转集合集合转数组_集合转json一、数组转集合:String[]array={“1″,”2″,”3″,”4”};List<String>list=Arrays.asList(array);ListarrList=newArrayList(list);arrList.add(“5”);二、集合转数组:…

    2026年1月23日
    4

发表回复

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

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