window.postMessage()接收不到信息(失效)

news2024/9/20 22:36:12

问题描述

按照正常的代码逻辑,应该是这个样子,通过iframe打开子窗口,能够正常通信。

// 接收端(父窗口)
window.onmessage = function (e) {
	// 逻辑代码	
}

// 发送端(子窗口)
window.parent.postMessage({}, "*")

查找原因

那么现在无法通信的话,最可能出现的问题就是windows对象获取的不对,比如我项目中,其实是2个iframe在通信,按照上面的通信方式,无法直接监听到。
在这里插入图片描述
所以,我们可以先通过F12看一下2个通信窗口的位置,确保位置正确,再决定使用什么window对象

解决方法:

由于我这里的子窗口调用的是其他公司的页面,所以就不让他们改了。直接让接收端监听父窗口,这样他俩就在同一频道交流了,就可以解决问题。

// 接收端(父窗口)
window.parent.onmessage = function (e) {
	// 逻辑代码
}

// 发送端(子窗口)
window.parent.postMessage({}, "*")

通过百度发现了一些东西

  • 弹出iframe:使用 window.top 或者 window.parent 来获取
  • window.open() :打开新窗口 使用 window.opener 获取

那么有人可能会问了,如果父子页面都是自己写的,自己方便改,能不能不通过parent进行通信呢?
答案也是不能,具体原因不知道,因为我尝试了一下,结果不行。
我认为这个postMessage通信,必须要有父子关系才行,或者间接的父子关系才可以保持通信,比如上面的案例就是间接的父子关系

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/432215.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第一次参加CSDN周赛,这体验很难说···

👨‍💻个人主页:花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 本文章收录于专栏 【CSDN周赛】 本篇文章目录🌏前言🌏一、勾股数🌸题目描述🌸题解&…

Android Activity 了解

前言 : Android 系统的四大组件分别是 1 活动 (Activity) 2 服务(Service) 3 广播接收器(Broadcast Receiver) 4 内容提供器 (Content Provider) 其中活动是所有安卓应用程序的…

rust闭包(Closure)

闭包(Closure) 闭包在现代化的编程语言中普遍存在。闭包是一种匿名函数,它可以赋值给变量也可以作为参数传递给其它函数,不同于函数的是,它允许捕获调用者作用域中的值。Rust 闭包在形式上借鉴了 Smalltalk 和 Ruby 语言,与函数最…

无聊小知识.04 以下代码会输出什么?

1、前言 今天同事给我看了一段代码,然后这段简单的代码,我却陷入了沉思。 2、代码 String string ""; try {string "123";return string; } finally {string "234"; } 这段代码,string最终是“123”还是…

【SpringSecurity】学习笔记(一)

学习笔记一、SpringSecurity 简介二、创建测试项目2.1、引入依赖2.2、测试三、SpringSecurity基本原理3.1、过滤器链3.1.1、FilterSecurityInterceptor3.1.2、ExceptionTranslationFilter3.1.3、UsernamePasswordAuthenticationFilter3.2、过滤器加载过程3.3、两个重要的接口3.…

看完这篇,保证你学网络安全一帆风顺!

网络安全入门很难吗?总有人抱怨黑客入门太难了,然后仔细了解之后却发现,觉得难是因为看的视频教程都不是配套的,都是这里学一点、那里学一点,脑子里连基本的框架都没有。更过分的是,有的人学了好几个月&…

uniapp - 微信小程序端引入 Echarts 图表及使用详细教程,简单快速的解决方案(拒绝复杂的过程,附带详细的使用示例保姆级教程)

效果图 现在各种平台的文章都太乱了,基本上实测无效。。。 帮你在uniapp开发中,微信小程序平台端使用 echats 图表的详细教程,快速并且简单轻松搞定。 下面是最后的运行结果,随便用的一个图表进行展示,图表更多用法详见文档!

用正则去掉所有HTML标签,保留指定标签

保留单个,如保留img标签:str.replace(/]*>/ig,) 保留多个,如保留strong、em、p、u标签:str.replace(/]*>/ig,) 清除所有标签,就是去掉保留指定标签的部分了:str.replace(/]*>/g, ) replace 正则匹…

(学习日记)2023.4.18

写在前面: 由于时间的不足与学习的碎片化,写博客变得有些奢侈。 但是对于记录学习(忘了以后能快速复习)的渴望一天天变得强烈。 既然如此 不如以天为单位,以时间为顺序,仅仅将博客当做一个知识学习的目录&a…

java基础——迭代器,数据结构,List,Set ,TreeSet集合,Collections工具类

迭代器,数据结构,List,Set ,TreeSet集合,Collections工具类 第一章 Iterator迭代器 1.1 Iterator接口 在程序开发中,经常需要遍历集合中的所有元素。针对这种需求,JDK专门提供了一个接口java.util.Iterator。 想要遍历Collection集合&…

【Leetcode】最小栈、栈的压入、弹出序列、逆波兰表达式求值

文章目录最小栈栈的压入、弹出序列逆波兰表达式求值最小栈 题目要求是在常数时间内检索到最小的元素的栈,思路是每当栈中存放一个更小的数据时,就将它入栈,相同的值也要入栈。 class MinStack { public:MinStack() {}//对自定义类型&#xf…

梭哈大模型,阿里云成了跟风者?

伴随AI大模型潘多拉魔盒打开,云市场GameChanger已到来。对阿里云这个昔日老大哥而言,从“领先者”变为“跟风者”,是否还有机会去重塑行业规则? 这可能是张勇全面掌舵阿里巴巴7年以来,事关未来最重要的一次“梭哈”。 …

《ChatGPT实用指南》(精编版)重磅发布,全网免费分享,快上车,别掉队

文 / 高扬(微信公众号:量子论) 据上次3月18号发布的V1.8版,已经过去十天,这期间AI领域发生了很多重大变化。 因此,我们对《ChatGPT实用指南》进行了重大改版,增加了大量实用的操作和详细的讲解&…

【开懂C++】引用与关键字auto

目录 一.引用1.引用的概念2.引用的使用和问题3.引用与指针的比较二.关键字auto 一.引用 1.引用的概念 引用就是给一个已经存在的变量取一个别名&#xff0c;与变量共用一段内存空间。注意引用的类型必须和变量类型相同&#xff0c;来演示下引用如何使用。 #include <iost…

2.1.2事件驱动reactor的原理与实现

先来了解一下epoll select(maxfd, rfds, wfds, efds, timeout);poll(pfds, length, timeout);#include <sys/epoll.h> int epoll_create(int size); int epoll_ctl(int epfd, int op, int fd, struct epoll_event *event); int epoll_wait(int epfd, struct epoll_event…

记录一次mysql死锁日志分析

记录一次mysql死锁-CSDN博客 MySQL死锁日志的查看和分析_mysql死锁日志解读_lkforce的博客-CSDN博客 此文承接以上两篇文章&#xff0c;文章1原创记录&#xff0c;文章2转载分析 一&#xff0c;死锁sql update tt_task SET navigation_distance ?, plan_arri…

决策树相关知识点

为什么id3和c4.5采用多叉树而cart采用二叉树&#xff1f; ID3 和 C4.5 采用的多叉树虽然在对训练样本集的学习中可以尽可能多地挖掘信息&#xff0c;但是其生成的决策树分支、规模都比较大&#xff0c;训练特别慢&#xff0c;CART 算法的二分法可以简化决策树的规模&#xff0…

Mybatis框架源码笔记(十一)之Spring整合mybatis演示与整合原理解析

1 Spring框架整合Mybatis示例 1.1 创建演示项目 1.2 项目目录结构 1.3 依赖配置pom.xml文件 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XML…

d2l机器翻译数据集

着重讲解一下机器翻译数据集的文件处理&#xff0c;以及最终返回了什么 目录 1.载入文件 2.文本预处理 3.词表 4.集成封装 5.总结返回值 1.载入文件 #save d2l.DATA_HUB[fra-eng] (d2l.DATA_URL fra-eng.zip,94646ad1522d915e7b0f9296181140edcf86a4f5) #save def read…

AJAX-0基础第一天入门

AJAX-第一天入门 学习目标 掌握 axios 相关参数&#xff0c;从服务器获取并解析展示数据掌握接口文档的查看和使用掌握在浏览器的 network 面板中查看请求和响应的内容了解请求和响应报文的组成部分 01.AJAX 概念和 axios 使用 目标 了解 AJAX 概念并掌握 axios 库基本使用…