用postMessage实现两个html页面之间的通信（使用iframe嵌套的两个html页面）

于 2022-11-09 22:29:15 发布
阅读量567 收藏 1
点赞数 1
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuer20124/article/details/127779136
版权

本示例纯属个人笔记，勿喷！！！

本示例我使用了express搭建了两个简易的本地服务器，一个是3000端口，一个是3001端口；每个服务器上都有一个页面，名称都叫page_1.html

如下是3000端口的页面的代码，这个页面通过iframe引入了3001端口的页面

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>3000端口的页面</h1>
	<button id='btn'>点击发送消息</button>
	<hr>
	<!-- 引入3001端口的页面 -->
	<iframe id="iframe" src="http://127.0.0.1:3001/page_1.html" frameborder="1"></iframe>
	<script>
		// 监听子页面发送过来的消息
		window.addEventListener('message', (e) => {
		     cons
最低0.47元/天 解锁文章
kuer20124
关注
HTML的通信功能
qq_43778935的博客
03-03 665
本文主要介绍HTML与通信相关的四个功能： 跨文档消息传输功能 WebSocket API Server-Sent Events API Broadcast Channel API 1。跨文档消息传输 这种类型的通信比如：主页面与主页面中的iframe子页面之间的互相通信。 HTML 5 中提供了网页文档之间相互接受与发送信息的功能，只要获取到网页所在窗口对象的实例，不仅同源的web网页之间可以互相通信，甚至可以实现跨域通信。（源即域名+端口号） 关键实现代码： // 对窗口对象的message事件进行
两个html的通信,如何利用js在两个html窗口间通信
weixin_28982301的博客
06-19 366
场景：当A页面打开B页面，在B页面操作后，A页面需要同步变更数据时A 页面 ,http://127.0.0.1:10001/A.htmlvar domain = 'http://127.0.0.1:10001';window.open('http://127.0.0.1:10001/B.html');window.addEventListener('message', function (even...
postMessage在网页间传递数据
weixin_48885013的博客
12-11 3109
postMessage window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。 两页面间 协议、域名、端口号相同，才能相互通信 语法 oth
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
weixin_39948309的博客
11-24 943
戳蓝字「前端技术优选」关注我们哦！引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会...
web前端实现多个元素标签页相互通信、html页面之间相互通信
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-05 4106
web前端实现多个元素标签页相互通信、html页面之间相互通信
在vue中实现嵌套页面(iframe)
10-15
如果`iframe`需要从Vue父页面获取数据，可以通过传递URL参数或者使用`postMessage` API来实现跨窗口通信。以下是一个简单的请求示例： ```javascript function PcCommon() { this.baseUrl = 'https://xxxxxxx'; //...
HTML5的postMessage的使用手册
12-03
`postMessage` 提供了一种安全且灵活的方式来实现跨文档消息传递，无论是页面内嵌套的iframe与主页面之间，还是不同页面之间，都可以通过这个API进行通信。 首先，我们来看一下`postMessage`的基本用法。它接收两个...
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
11-20
HTML5的`postMessage` API解决了跨域通信的问题，这对于现代网页应用中内嵌外部页面或者使用`iframe`的情况尤其重要。跨域通信通常受到浏览器的同源策略限制，但`postMessage`提供了一种安全的方式让不同源的页面...
vue中iframe使用详解，结合postMessage实现跨域通信
艾欢欢的博客
09-29 5001
使用场景 需求：在一个H5项目的页面中以url的方式嵌入另一个项目的页面。（不得不使用iframe） 而为了兼容移动端api（封装的一个移动端api，iframe内嵌页面不生效），需要实现父子页面的通信 （使用postMessage）。 iframe使用 基本使用 直接在页面嵌套iframe标签指定src即可使用iframe。 <iframe src="xxx.html"></i...
html中页面间通信,基于HTML5实现跨文档通信
weixin_33344629的博客
06-03 292
原标题：基于HTML5实现跨文档通信1写在前面曾经在 Web 开发中遇到这样一个需求，你的网页中需要嵌入一个跨域的 iframe 页面，iframe 提供了点击的按钮，点击按钮触发事件，需要调用你的网页的一个方法来处理点击事件。但是，基于浏览器的同源策略，Web 浏览器不允许窗口间的通信。同源策略指的是：在页面中，从某一个域加载的脚本不能访问从另一个域加载的窗口内容。虽说同源策略在很多情况下能保护...
html页面数据通信,4、网页是怎么运作的？
weixin_35802571的博客
06-09 200
对于不懂技术的新人，如果说要学习开发技术。我通常建议他从网页开始。网页由Html、Css和Javascript三部分构成。我们称它为网页三剑客。4.1.1 什么是网页三剑客？小奈：我想学习写代码。有时提出的需求技术说做不了，但其它平台已经实现了这个功能。开发是不是忽悠我？大仁：那我建议你学下html，上次和你说的输入url后，货品其实就是网页，现在教你写网页。大仁：和你说说网页三剑客，三剑客各司其...
JS实现两个页面之间的通信
梦颖飞燕--博客
12-14 4750
两个不同页面之间的通信，通过一个拖拽demo来模拟； 首先，写好基础的拖拽代码： [html] view plain copy script>      window.onload = function() {          var oDiv = document.getElementById('div');          oDiv.
iframe+postMessage跨域访问
qq_38143787的博客
12-25 496
在实际的开发中，我们可能会遇到在a项目中嵌套b项目的页面，再比如一些门户网站，当在这个网站中要包含一些其他的项目的时候，也可以采用这种方式，在不同的域名之间传递token等信息进行通信。 API详解 起了进程两个来模拟这个通信 父界面的地址为：http://192.168.169.1/test 子界面的地址为：http://192.168.169.1:81/test1 父界面向子界面传递信息： 父界面： <h1>主页面</h1> <p class="title
如何实现浏览器内多个标签页之间的通信?
weixin_43484007的博客
06-07 3812
实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。通信方法如下：...
使用postmsg让两个页面互相传递消息
qq_33807889的博客
03-18 1152
dad.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
html如何让两个页面通信,两个独立html页面怎么通信
weixin_36095974的博客
06-03 764
该楼层疑似违规已被系统折叠隐藏此楼查看此楼1. 利用localStroage，A页面将数据存入localStroage，B页面读取localStorage中的数据2. 关键点: B页面如何知道A页面什么时候存数据到localStorage3. localStorage中有个‘storage’事件4. window.addEventListener(‘storage’, callback)，A页面...
用postMessage与message实现iframe之间跨域通信
qq_32886245的博客
01-07 1308
子页面（iframe1、iframe2）发送的消息，mian.html可以接收到 两个不同域的iframe，可以用父页面做转发，实现消息通信 代码 main // 3.父页面接收消息，并发送到iframe2 window.addEventListener('message',(event)=>{ if(!event.data.from || event.data.from !== 'iframe1'){ return } console.log('%c 2..
js 关于iframe页面之间通信, 传递消息
godev的博客
08-26 3575
通过使用postMessage和onmessage这两个HTML5的方法, 实现iframe跨页面通信功能
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值