postmessage()在同一域名下,传递消息给另一个页面

这里是同域名下,getmessage.html(发送信息)传递消息给index.html(收到信息,并回传收到信息)
index.html页面

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html charset=utf-8"/><title>javascript变量声明的一些测试</title><link rel="stylesheet" href="styles.css"/></head><body><div id="firstdiv" style="width:900px;text-align: center;border:10px solid blue"><form id="form1" action="" method="post">  <input type="button" name="submit1" value="提交"/></form> <p id="msg"></p></div>    </body><script type="text/javascript" src="test.js"></script></html>

这里 是index.html页面中的test.js代码

const btn=document.getElementsByName('submit1');btn[0].addEventListener('click',()=>{let popup=window.open('getmessage.html');window.addEventListener('message',function(e){console.log(e);if(e.origin!='http://xuejs.xyz')return;//这里收到发来的信息,并显示document.getElementById('msg').innerHTML=e.data;e.source.postMessage('收到信息',e.origin);})
});

//这里是getmessage.html页面

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html charset=utf-8"/><title>接收postmessage传来的信息</title><script type="text/javascript" src="eventutil.js"></script></style></head><body><p id="getmsg">waiting for message...</p></body><script type="text/javascript">//window.opener表示打开getmessage.html页面的父页面
//这里用postMessage()传递了一条消息给index.htmlwindow.opener.postMessage('super window 接收到一条消息','/');//下面是接收index.html收到页面后的回传信息window.addEventListener('message',(e)=>{console.log(e);if(e.origin!='http://xuejs.xyz')return;console.log(e.data);});</script></html>

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

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

相关文章

机器学习统计学基础 - 最大似然估计

最大似然估计&#xff08;Maximum Likelihood Estimation, MLE&#xff09;是一种常用的参数估计方法&#xff0c;其基本原理是通过最大化观测数据出现的概率来寻找最优的参数估计值。具体来说&#xff0c;最大似然估计的核心思想是利用已知的样本结果&#xff0c;反推最有可能…

Java并发编程工具包(JUC)详解

在现代软件开发中&#xff0c;多线程编程是一个不可避免的话题。为了更好地管理和利用多线程&#xff0c;Java提供了一个强大的工具包——java.util.concurrent&#xff08;简称JUC&#xff09;。JUC包含了许多用于并发编程的类和接口&#xff0c;帮助开发者高效、安全地处理线…

binutils ifunc 流程图

上图是x86 binutils 的流程图。 函数说明_bfd_x86_elf_link_hash_table_createInit local STT_GNU_IFUNC symbol hash.elf_x86_64_check_relocsAdd support for handling STT_GNU_IFUNC symbols_bfd_elf_x86_get_local_sym_hashFind and/or create a hash entry for local sym…

[Go] 字符串遍历数据类型问题

字符串遍历问题 在使用for i,v:range str遍历字符串时 str[i]是unit8&#xff08;byte&#xff09;类型&#xff0c;返回的是单个字节 字符串在Go中是以字节序列的形式存储的&#xff0c;而 str[i] 直接访问了这个字节序列中的第 i 个字节。如果字符串中的字符是单字节的ASCII…

Leetcode—97. 交错字符串【中等】

2024每日刷题&#xff08;140&#xff09; Leetcode—97. 交错字符串 2d动规实现代码 class Solution { public:bool isInterleave(string s1, string s2, string s3) {int m s1.length();int n s2.length();int len s3.length();if(m n ! len) {return false;}vector<…

SpringBoot日常:封装rabbitmq starter组件

文章目录 逻辑实现RabbitExchangeEnumRabbitConfigRabbitModuleInfoRabbitModuleInitializerRabbitPropertiesRabbitProducerManagerPOM.xmlspring.factories 功能测试application.yml配置生产者&#xff1a;消费者&#xff1a;测试结果&#xff1a;总结 本章内容主要介绍编写一…

stm32 USB CDC类虚拟串口初体验

1. 目标 本文介绍CubeMX生成 USB CDC类虚拟串口工程的操作步骤。 2. 配置流程 时钟配置 usb外设需要48M时钟输入 stm32405使用外部时钟源HSE,否则配不出来48M时钟stm32h750内部有一个48M时钟 stm32f405时钟配置 stm32h750时钟配置 Connectivity ->USB_OTG_FS 和 Connect…

GEE代码实例教程详解:植被状况指数(VCI)与干旱监测

简介 在本篇博客中&#xff0c;我们将使用Google Earth Engine (GEE) 进行植被状况指数&#xff08;Vegetation Condition Index, VCI&#xff09;的计算和干旱监测。通过MODIS NDVI数据&#xff0c;我们可以评估2001年至2024年间的植被状况和干旱等级。 背景知识 MODIS NDV…

C++初阶:从C过渡到C++的入门基础

✨✨所属专栏&#xff1a;C✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ C发展历史 C的起源可以追溯到1979年&#xff0c;当时BjarneStroustrup(本贾尼斯特劳斯特卢普&#xff0c;这个翻译的名字不同的地⽅可能有差异)在⻉尔实验室从事计算机科学和软件⼯程的研究⼯作。⾯对项⽬中复…

第4章 Vite模块化与插件系统(二)

4.3 常用插件介绍 4.3.1 官方插件 vitejs/plugin-vue 用于支持 Vue.js 开发&#xff1a; npm install vitejs/plugin-vue --save-devimport vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue()] })vitejs/plugin-react 用于支持 React 开发&#xf…

JavaDS —— 顺序表ArrayList

顺序表 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构&#xff0c;一般情况下采用数组存储。在数组上完成数据的增删查改。在物理和逻辑上都是连续的。 模拟实现 下面是我们要自己模拟实现的方法&#xff1a; 首先我们要创建一个顺序表&#xff0c;顺序表…

关于Mars3d的入门

关于Mars3d的入门 一. 创建地球&#xff0c;加载瓦片图层二 矢量图层2.1 常用矢量图层2.1.1 GraphicLayer2.1.2 GeoJsonLayer 2.2 矢量图层的点击事件 三 矢量数据四 事件机制 一. 创建地球&#xff0c;加载瓦片图层 // 1. 创建地球let map new mars3d.Map("mars3dContai…

基于openStreetMap的路径规划ROS功能包

文章目录 概要OSM是什么主要特点主要组成部分使用场景如何获取OSM常规参数配置笛卡尔坐标系原点经纬度设置编译和运行如何规划演示效果概要 由于https://github.com/MichalDobis/osm_planner存在一些使用问题,不是那么方便,我对其进行了一些修改,便于进行起点到终点进行路径…

数据如何查询

分组查询 分组查询&#xff08;Group By&#xff09;是在关系型数据库中用来对数据进行分组并对每个组应用聚合函数的一种操作。这种查询通常结合聚合函数&#xff08;如 COUNT、SUM、AVG、MAX、MIN 等&#xff09;使用&#xff0c;用于在查询结果中生成汇总信息 特点(聚合)&am…

从零开始做题:My_lllp

题目 给出一张png图片 解题 ┌──(holyeyes㉿kali2023)-[~/Misc/题目/zulu/My_lllp] └─$ python2 lsb.py extract my_lllp.png out.txt my_lllp [] Image size: 1080x1079 pixels. [] Written extracted data to out.txt. ┌──(holyeyes㉿kali2023)-[~/Misc/题目/zul…

python的线程池和进程池

Python 3.2 就已经引入了 concurrent.futures 模块&#xff0c;提供了线程池&#xff08;ThreadPoolExecutor&#xff09;和进程池&#xff08;ProcessPoolExecutor&#xff09;&#xff0c;用于简化并发编程的管理和调度。 ThreadPoolExecutor 在ThreadPoolExecutor 是 conc…

简易Qt串口助手

界面显示如下 关于串口类 初始化 设置串口号 设置波特率 打开串口 发送按钮功能实现 接收数据显示在控件中 关闭串口

使用 MFA 保护对企业应用程序的访问

多因素身份验证&#xff08;MFA&#xff09;是在授予用户访问特定资源的权限之前&#xff0c;使用多重身份验证来验证用户身份的过程&#xff0c;仅使用单一因素&#xff08;传统上是用户名和密码&#xff09;来保护资源&#xff0c;使它们容易受到破坏&#xff0c;添加其他身份…

springboot非物质文化遗产管理系统-计算机毕业设计源码16087

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 删除信息流程 2.3 系统功能…

前端开发过程中经常遇到的问题以及对应解决方法 (持续更新)

我的朋友已经工作了 3 年&#xff0c;他过去一直担任前端工程师。 不幸的是&#xff0c;他被老板批评了&#xff0c;因为他在工作中犯了一个错误&#xff0c;这是一个非常简单但容易忽视的问题&#xff0c;我想也是很多朋友容易忽视的一个问题。 今天我把它分享出来&#xff…