【跨域请求（二）】postMessage《双向跨域》

最新推荐文章于 2023-12-19 15:25:53 发布
最新推荐文章于 2023-12-19 15:25:53 发布
阅读量303 收藏 1
点赞数
分类专栏： 跨域篇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/109896451
版权
核心：
1. postMessage()方法：向其他窗口发送消息；
2. message事件：监听其他窗口（postMessage）发送过来的消息；
获取窗口的引用
1. iframe： window.frames[0]；
2. iframe： contentWindow、 contentDocument；
3. iframe：class、id 等选择器；
4. 执行 window.open() 返回的窗口对象；
-------------👆父------------------------------👇子-------------
5. 新窗口获取原窗口： window.opener；
6. message事件的回信对象： event.source；

文章目录

一、单向通信

1. 【打开B，B接收A的消息】

  • a.html【A域】（http://aaa.com/a.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a页面发送消息</title>
	</head>
	<body>
		<input id="btn" type="button" value="打开 b 页面" />
		<script>
			var btn = document.querySelector('#btn');
			
			btn.addEventListener('click', function() {
				// 打开新窗口，并存储其引用（通过引用调用 postMessage）
				var pageB = window.open('http://bbb.com/b.html', '_blank');
				
				// 3秒后向该窗口发送消息
				setTimeout(function() {
					// 调用 postMessage 函数，将消息发送给 pageB
					pageB.postMessage('该消息由A发送。', 'http://bbb.com/b.html');
					// 第二参数为接收消息的窗口的源
					// 1. 可以具体到某一个页面（url）
					// 2. 或者域名（该域下的所有页面都会接收）
					// 3. 或通配符 * （不限域，风险）
				}, 3000);
			});
		</script>
	</body>
</html>
  • b.html【B域】（http://bbb.com/b.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>b页面接收消息</title>
		<style>
			.msg  {
				font-size: 3em;
				font-weight: bold;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="msg"></div>
		<script>
			var msg = document.querySelector('.msg');
			
			// 接收消息
			function receiveMessage(e) {
				// 过滤掉不是从源发送来的消息
				if (e.origin !== 'http://aaa.com') return;
				
				// e.data 就是 A 页 postMessage 发送过来的内容
				msg.textContent = e.data;
				
				// e.source 是 A 窗口的引用
			}
			
			// message 事件，监听其它页面 postMessage 发送过来的消息
			window.addEventListener('message', receiveMessage, false);
		</script>
	</body>
</html>

2. 【打开B，A接收B的消息】

  • a.html【A域】（http://aaa.com/a.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a页面接收消息</title>
		<style>
			.msg {
				font-size: 3em;
				font-weight: bold;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>
		<input id="btn" type="button" value="打开 b 页面" />
		<div class="msg"></div>
		<script>
			var btn = document.querySelector('#btn');
			var msg = document.querySelector('.msg');
			
			btn.addEventListener('click', function() {
				// 打开新窗口，不向该窗口发送消息
				window.open('http://bbb.com/b.html', '_blank');
			});
			
			// 接收消息
			function receiveMessage(e) {
				// 过滤掉不是从该源发送来的消息
				if (e.origin !== 'http://bbb.com') return;
				
				// e.data 就是 B 页 postMessage 发送过来的内容
				msg.textContent = e.data;
				
				// e.source 是 B 窗口的引用
			}
			
			// message 事件，监听其它页面 postMessage 发送过来的消息
			window.addEventListener('message', receiveMessage, false);
		</script>
	</body>
</html>
  • b.html【B域】（http://bbb.com/b.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>b页面发送消息</title>
	</head>
	<body>
		<script>
			// window.opener 就是父窗口的引用
			var pageA = window.opener;
			
			// 检测当前窗口是否通过其他页面打开（是否有父窗口）
			if (pageA) {
				// 3秒后向该窗口发送消息
				setTimeout(function() {
					pageA.postMessage('该消息由B发送。', 'http://aaa.com/a.html');
						// 第二参数为接收消息的窗口的源
						// 1. 可以具体到某一个页面（url）
						// 2. 或者域名（该域下的所有页面都会接收）
						// 3. 或通配符 * （不限域，风险）
				}, 3000);
			}
		</script>
	</body>
</html>

二、双向通信

1. 【打开B，B先接收A消息，再回复A】

  • a.html【A域】（http://aaa.com/a.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a页面</title>
		<style>
			.msg  {
				font-size: 3em;
				font-weight: bold;
				text-align: center;
				color: blue;
			}
		</style>
	</head>
	<body>
		<input id="btn" type="button" value="打开 b 页面" />
		<div class="msg"></div>
		<script>
			var btn = document.querySelector('#btn');
			var msg = document.querySelector('.msg');
					
			btn.addEventListener('click', function() {
				// 打开新窗口，并存储其引用（通过引用调用 postMessage）
				var pageB = window.open('http://bbb.com/b.html', '_blank');
				
				// 3秒后向该窗口发送消息
				setTimeout(function() {
					// 调用 postMessage 函数，将消息发送给 pageB
					pageB.postMessage('该消息由A发送。', 'http://bbb.com/b.html');
					// 第二参数为接收消息的窗口的源
					// 1. 可以具体到某一个页面（url）
					// 2. 或者域名（该域下的所有页面都会接收）
					// 3. 或通配符 * （不限域，风险）
				}, 3000);
			});
			
			// 接收消息
			function receiveMessage(e) {
				// 过滤掉不是从该源发送来的消息
				if (e.origin !== 'http://bbb.com') return;
				
				// e.data 就是 B 页 postMessage 发送过来的内容
				msg.textContent = e.data;
				
				// e.source 是 B 窗口的引用
			}
			
			window.addEventListener('message', receiveMessage, false);
		</script>
	</body>
</html>
  • b.html【B域】（http://bbb.com/b.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>b页面</title>
		<style>
			.msg  {
				font-size: 3em;
				font-weight: bold;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="msg"></div>
		<script>
			var msg = document.querySelector('.msg');
			
			// 用于存储父窗口的引用
			var pageA = window.opener;
			
			// 接收消息
			function receiveMessage(e) {
				// 过滤掉不是从该源发送来的消息
				if (e.origin !== 'http://aaa.com') return;
				
				// e.data 就是 A 页 postMessage 发送过来的内容
				msg.textContent = e.data;

				// e.source 是 A 窗口的引用
					// console.log(e.source === pageA); // true
				e.source.postMessage('B收到并立即回复。', e.origin);
			}
			
			// message 事件，监听其它页面 postMessage 发送过来的消息
			window.addEventListener('message', receiveMessage, false);
		</script>
	</body>
</html>

2. 【打开B，A先接收B消息，再回复B】

  • a.html【A域】（http://aaa.com/a.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a页面</title>
		<style>
			.msg {
				font-size: 3em;
				font-weight: bold;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>
		<input id="btn" type="button" value="打开 b 页面" />
		<div class="msg"></div>
		<script>
			var btn = document.querySelector('#btn');
			var msg = document.querySelector('.msg');
			
			// 用于存储子窗口的引用
			var pageB = null;
			
			btn.addEventListener('click', function() {
				// 打开新窗口，不立即向该窗口发送消息
				pageB = window.open('http://bbb.com/b.html', '_blank');
			});
			
			// 接收消息
			function receiveMessage(e) {
				// 过滤掉不是从该源发送来的消息
				if (e.origin !== 'http://bbb.com') return;
				
				// e.data 就是 B 页 postMessage 发送过来的内容
				msg.textContent = e.data;
				
				// e.source 是 B 窗口的引用
					// console.log(e.source === pageB);	// true
					e.source.postMessage('A收到并立即回复。', e.origin);
			}
			
			// message 事件，监听其它页面 postMessage 发送过来的消息
			window.addEventListener('message', receiveMessage, false);
		</script>
	</body>
</html>
  • b.html【B域】（http://bbb.com/b.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.msg {
				font-size: 3em;
				font-weight: bold;
				text-align: center;
				color: blue;
			}
		</style>
	</head>
	<body>
		<div class="msg"></div>
		<script>
			var msg = document.querySelector('.msg');
			
			// window.opener 就是父窗口的引用
			var pageA = window.opener;
			
			// 检测当前窗口是否通过其他页面打开（是否有父窗口）
			if (pageA) {
				// 3秒后向该窗口发送消息
				setTimeout(function() {
					pageA.postMessage('该消息由B发送。', 'http://aaa.com/a.html');
						// 第二参数为接收消息的窗口的源
						// 1. 可以具体到某一个页面（url）
						// 2. 或者域名（该域下的所有页面都会接收）
						// 3. 或通配符 * （不限域，风险）
				}, 3000);
			}
			
			// 接收消息
			function receiveMessage(e) {
				// 过滤掉不是从该源发送来的消息
				if (e.origin !== 'http://aaa.com') return;
				
				// e.data 就是 A 页 postMessage 发送过来的内容
				msg.textContent = e.data;
				
				// e.source 是 A 窗口的引用
				// console.log(e.source === pageA);	// true
			}
			
			// message 事件，监听其它页面 postMessage 发送过来的消息
			window.addEventListener('message', receiveMessage, false);
		</script>
	</body>
</html>

三、接收多个页面发送的消息

【A页接收B、C的消息】

  • a.html【A域】（http://aaa.com/a.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a页面接收消息</title>
		<style>
			.msg_b {
				font-size: 3em;
				font-weight: bold;
				text-align: center;
				color: red;
			}
			.msg_c {
				font-size: 3em;
				font-weight: bold;
				text-align: center;
				color: blue;
			}
		</style>
	</head>
	<body>
		<input id="btn" type="button" value="同时打开 b、c 页面" />
		<div class="msg_b"></div>
		<div class="msg_c"></div>
		<script>
			var btn = document.querySelector('#btn');
			var msg_b = document.querySelector('.msg_b');
			var msg_c = document.querySelector('.msg_c');
			
			btn.addEventListener('click', function() {
				// 打开新窗口，不向该窗口发送消息
				window.open('http://bbb.com/b.html', '_blank');
				window.open('http://ccc.com/c.html', '_blank');
			});
			
			// 监听 B 页发送过来的消息
			window.addEventListener('message', function(e) {
				// 筛选出 B 发送过来的消息
				if (e.origin !== 'http://bbb.com') return;
				msg_b.textContent = e.data;
			}, false);
			
			// 监听 C 页发送过来的消息
			window.addEventListener('message', function(e) {
				// 筛选出 C 发送过来的消息
				if (e.origin !== 'http://ccc.com') return;
				msg_c.textContent = e.data;
			}, false);
		</script>
	</body>
</html>
  • b.html【B域】（http://bbb.com/b.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>b页面发送消息</title>
	</head>
	<body>
		<script>
			// window.opener 就是父窗口的引用
			var pageA = window.opener;
			
			// 检测当前窗口是否通过其他页面打开（是否有父窗口）
			if (pageA) {
				// 3秒后向该窗口发送消息
				setTimeout(function() {
					pageA.postMessage('该消息由B发送。', 'http://aaa.com/a.html');
						// 第二参数为接收消息的窗口的源
						// 1. 可以具体到某一个页面（url）
						// 2. 或者域名（该域下的所有页面都会接收）
						// 3. 或通配符 * （不限域，风险）
				}, 3000);
			}
		</script>
	</body>
</html>
  • c.html【C域】（http://ccc.com/c.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>c页面发送消息</title>
	</head>
	<body>
		<script>
			// window.opener 就是父窗口的引用
			var pageA = window.opener;
			
			// 检测当前窗口是否通过其他页面打开（是否有父窗口）
			if (pageA) {
				// 3秒后向该窗口发送消息
				setTimeout(function() {
					pageA.postMessage('该消息由C发送。', 'http://aaa.com/a.html');
						// 第二参数为接收消息的窗口的源
						// 1. 可以具体到某一个页面（url）
						// 2. 或者域名（该域下的所有页面都会接收）
						// 3. 或通配符 * （不限域，风险）
				}, 3000);
			}
		</script>
	</body>
</html>

四、利用 postMessage 读写其他窗口的 LocalStorage


传送门：浏览器同源政策及其规避方法 / 3.4 LocalStorage

  • a.html【A域】（http://aaa.com/a.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a页读写其它页面localStorage</title>
	</head>
	<body>
		<input id="btn" type="button" value="向B页发送消息" />
		<iframe style="display: none;" src="http://bbb.com/b.html"></iframe>
		<script>
			var btn = document.querySelector('#btn');
			
			var pageB = document.getElementsByTagName('iframe')[0].contentWindow;
			// var pageB = window.frames[0];
			
			// 需要发送的数据
			var obj = {name: 'Jack', foo:'bar'};
			// var foo = {id: 'aaa'};
			
			btn.addEventListener('click', function() {
				// key: 'storage' 是存入 localStorage 的键名，数据均存储在同一行
				// 若需要存第二条 localStorage，则设置为其他 key 名，如：key: 'demo'
				
				// 存储 localStorage（发送消息，修改数据）
				pageB.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com/b.html');
				// pageB.postMessage(JSON.stringify({key: 'demo', method: 'set', data: foo}), 'http://bbb.com/b.html');
				
				// 获取 localStorage（发送消息，获取数据，本页 message 监听读取）
				pageB.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
				// pageB.postMessage(JSON.stringify({key: 'demo', method: "get"}), "*");
				
				// 删除 localStorage（发送消息，删除数据）
				pageB.postMessage(JSON.stringify({key: 'storage', method: "remove"}), "*");
				// pageB.postMessage(JSON.stringify({key: 'demo', method: "get"}), "*");
			});
			
			function receiveMessage(e) {
				if (e.origin !== 'http://bbb.com') return;
				
				// 读取某个数据
				console.log(JSON.parse(e.data).name);
				
				// 读取所有 localStorage 数据
				console.log(JSON.parse(e.data));
			}
			
			window.addEventListener('message', receiveMessage, false);
		</script>
	</body>
</html>
  • b.html【B域】（http://bbb.com/b.html）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>b页存储本页localStorage</title>
	</head>
	<body>
		<script>
			var msg = document.querySelector('.msg');
			
			// 接收消息
			function receiveMessage(e) {
				// 过滤掉不是从源发送来的消息
				if (e.origin !== 'http://aaa.com') return;
				
				var payload = JSON.parse(e.data);
				
				switch (payload.method) {
					case 'set':
						localStorage.setItem(payload.key, JSON.stringify(payload.data));
						break;
					case 'get':
						var parent = window.parent;
						var data = localStorage.getItem(payload.key);
						parent.postMessage(data, e.origin);
						break;
					case 'remove':
						localStorage.removeItem(payload.key);
						break;
				}
			}
			
			// message 事件，监听其它页面 postMessage 发送过来的消息
			window.addEventListener('message', receiveMessage, false);
		</script>
	</body>
</html>
iuukai
关注
专栏目录
关于ifram的postMessage双向传值
胖哒哒的博客
08-21 471
我们把引入ifram的页面称为F页面，被引入的页面称为C页面 1，F页面往C页面传值 ~~ 在F页面写入 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
postMessage不同页面跨域通信 双向传递 iframe
qq_38935512的博客
03-11 309
此例采用 iframe 父页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe父级页面</title> <style> * { padding: ...
JavaScript高级语法之跨域（postMessage，CORS，JSONP）
上善若泪
05-08 3415
目录 1 postMessage概述 1.1 iframe与主页面的通信 2 CORS 2.1 发送请求，“预检”机制 2.2 收到响应 3 JSONP 1 postMessage概述 所谓“同域限制”指的是，出于安全考虑，浏览器只允许脚本与同样协议、同样端口、同样域名的地址进行通信。比如，www1.example.com页面上面的脚本，只能与该域名（相同协议、相同端口）进行通信，...
关于跨域的一些知识
weixin_30407613的博客
03-02 155
由于公司最近要做一个跨域的项目，所以研究了一个跨域，并实践了其中的几中方法。这理总结一下。 ==========================跨域-知识=========================== 什么是跨域？ 首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制。 什么是同源策略？ 在客户端编程语言中，如JavaScrip...
双重跨域问题处理
zhuzhaoxu114的专栏
04-07 3573
目录 双重跨域问题处理 1、问题出现的业务场景 所在微服务系统引入网关服务，通过网关服务调用原微服务系统，调用异常 前端异常信息如下： The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8080,http://localhost:8080 *', but only one is allowed. 该属性只允许被设置为一个，但是目前有多个 2、问题原因 2.1、nginx设置了
HTML5中使用postMessage实现Ajax跨域请求的方法
09-28
在探讨HTML5中使用postMessage实现Ajax跨域请求的方法之前，首先要明白同源策略（Same-origin Policy）的基本概念。浏览器同源策略是一种安全机制，它限制了来自不同源的文档或者脚本如何进行交互。所谓的“同源”指...
html5跨域通讯之postMessage的用法总结
01-19
postMessagePortal.html 页面代码复制代码代码如下:<!...title>标题</title><link rel=”stylesheet” href=”styles.css”><...[removed] ...<p>var defaultTitle = “Portal”;...</p>
详解使用postMessage解决iframe跨域通信问题
12-13
【跨域通信问题与postMessage】 在Web开发中，跨域通信是一个常见的挑战，由于浏览器的同源策略限制，不同源的页面之间不能直接共享数据或触发交互。然而，有时候我们需要在一个页面（如主页面）中嵌入另一个页面...
关于iframe跨域使用postMessage的实现
01-21
但是iframe直接的交互存在**跨域问题**，目前看来解决方式有两种。...简而言之就是：postMessage是挂载在window下的一个方法，用于不同域名下的两个页面的信息交互，父子页面通过postMessage（）发送
浅谈postMessage ！！！！
最新发布
xyfwang的博客
12-19 564
是什么？是 JavaScript 中用于实现跨文档通信（Cross-document messaging）的方法。它允许在不同窗口或 iframe 之间安全地传递数据。通常情况下，这些窗口或 iframe 可能来自同一域或不同域。在接收消息的窗口或 iframe 中监听message是 JavaScript 中用于实现跨文档通信（Cross-document messaging）的方法。它允许在不同窗口或 iframe 之间安全地传递数据。通常情况下，这些窗口或 iframe 可能来自同一域或不同域。
html5: postMessage解决跨域通信的问题
weixin_34370347的博客
08-17 185
效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindo...
实现两个窗口通信方法－postMessage
热门推荐
DOS的博客
08-06 2万+
两个窗口的通信问题应该是一个比较常见的问题了，通信可以通过很多种方式,如下： localStorage postMessage websocket 今天博主先来一篇postMessage干货，后期还会给出websocket的实现代码。 首先来看一下基本的语法 otherWindow.postMessage(message, targetOrigin, [transfer]);o
PostMessage的原理和实际应用
陈荣亮的博客
11-23 1万+
PostMessage和实际应用 PostMessage是html5新引进的一个可跨源通信api，你可以通过这个api，让主页面和任意frame类页面或window.open打开的页面进行双向通信。大概流程如下图： 简而言之，通过PostMessage，你可以无视不同域名导致的跨域报错等问题。 关于它的用法，需要注意的几点： 首先，信息传递安全问题。为了你的信息传递能准确传达，无论是作为主页面还是子页面，传递重要信息时都应该填写origin而不是“*”，避免被截获。 其次，iframe或者window.
postMessage使用方法
hu441805796的博客
11-18 2393
postMessage 简介
weixin_34055787的博客
10-31 1204
postMessage 的定义 postMessage 是 html5 引入的 API，postMessage() 方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档，多窗口，跨域消息传递。多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。 发送数据 otherWindow.postMessage(message, targetOrigin, [transfer]...
【前端知识点】跨域之跨域window.postMessage
chaunceyw的博客
09-12 1245
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机  (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用
JavaScript跨域插件 实现双向跨域
ve12345的博客
11-18 228
由于浏览器（同源策略）限制，JavaScript 跨域的问题，一直是一个颇为棘手的问题。HTML5 提供了跨文档消息传输的功能，在网页文档之间互相接收与发送信息。使用这个功能，不仅同源（域 + 端口号）的 Web 网页之间可以互相通信，还可以在两个不同域名之间实现跨域通信。 跨文档消息传输Cross Document Messaging提供了postMessage方法在不同网页文档之间互相传递数...
html5 postMessage解决跨域、跨窗口消息传递
weixin_34221773的博客
12-08 703
一些麻烦事儿 平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()...
前端实现跨域请求的JSONP方法
5. window.postMessage 这是一种允许不同源的窗口之间进行通信的方法，通过监听`message`事件，可以接收其他窗口发送的数据。这种方法适用于页面内嵌的IFrame或者不同窗口之间的跨域通信。 6. WebSocket跨域 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值