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


相关推荐

  • File类、递归

    File类、递归

    2021年5月19日
    110
  • 前端缓存处理[通俗易懂]

    前端缓存处理[通俗易懂]前端的缓存原来是这样做的!

    2025年8月6日
    2
  • ORACLE 更改username

    ORACLE 更改username

    2022年1月23日
    44
  • PyTorch碎片:PyToch和Torchvision对应版本「建议收藏」

    PyTorch碎片:PyToch和Torchvision对应版本「建议收藏」前言错误分析:安装pytorch或torchvision时,无法找到对应版本cuda可以找到,但是无法转为.cuda()以上两种或类似错误,一般由两个原因可供分析:cuda版本不合适,重新安装cuda和cudnnpytorch和torchvision版本没对应上pytorch和torchvision版本对应关系pytorchtorchvisionpythoncuda1.5.10.6.1>=3.69.2,10.1,10.21.5.0

    2022年6月24日
    56
  • 猴子摘香蕉_猴子香蕉游戏下载

    猴子摘香蕉_猴子香蕉游戏下载注意:不是严格按照一阶谓词逻辑写法,仅供参考题目:房内有一个猴子,一个箱子,天花板挂了一串香蕉,其位置如图所示。猴子为了拿到香蕉,它必须把箱子搬到香蕉下面,然后再爬到箱子上。请定义必要的谓词,列出问题的初始化状态(即下图所示状态),目标状态(猴子拿到了香蕉,站在箱子上,箱子位于位置b)步骤:1、定义描述环境状态的谓词AT(x,y)x在y处x={monke…

    2022年9月26日
    2
  • python缩进格式错误的是_python 缩进错误,

    展开全部要求严2113格的代码缩进是python语法的一大特色,就像C语言5261家族(C、C++、Java、C#等等)中的花括4102号一1653样重要,在大多数场合还有必要。在很多代码规范里面也都有要求代码书写按照一定的规则进行换行和代码缩进,但是这些要求只是纯粹是方便人(程序员)来阅读、使用或修改的,对于编译器或者解释器而言,完全是视而不见的。但是对Python解释器而言,每行代码前的缩进都…

    2022年4月12日
    34

发表回复

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

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