window.postMessage讲解

原创已于 2022-11-23 16:23:45 修改 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #postMessage

于 2022-11-14 15:12:46 首次发布

javaScript 同时被 2 个专栏收录

16 篇文章

订阅专栏

html

6 篇文章

订阅专栏

api文档说明：window.postMessage - Web API 接口参考 | MDN

postMessage可以实现跨源通信，即一个窗口可以获得对另一个窗口的引用，传递消息。但这种消息的传递也是有限制的，另一个窗口必须是从本窗口打开（window.open）或者是本窗口中的iframe。

消息监听：

window.addEventListener("message", function(e){
	console.log(e);
    console.log(e.origin); // 发送消息窗口的地址，监听消息时，可限制接收消息来源地址
    console.log(e.source); // 发送消息窗口Window对象
    console.log(e.data); // 消息内容，字符串或者对象
})

消息发送：

/**
* otherWindow: 其他窗口的window对象
* message: 消息内容，字符串或对象都可
* targetOrigin: 接收消息窗口地址，指定哪些窗口可以接收到消息，可为“*”（无限制）
* transfer: 可选
*/
otherWindow.postMessage(message, targetOrigin, [transfer]);

示例代码：

postMessage_1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>窗口1</title>
	</head>
	<body>
		<textarea row=10 style="width: 100%;" id="msg"></textarea>
		<button type="button" onclick="openNew()">打开新窗口</button>
		<button type="button" onclick="sendMsg()">发送open窗口消息</button>
		<button type="button" onclick="sendMsgIframe()">发送iframe消息</button>
		<button type="button" onclick="sendMsgIframe2()">发送iframe2消息</button>
		<p>iframe窗口</p>
		<iframe src="./postMessage_2.html" style="width: 100%; height: 200px;" id="teIframe"></iframe>
	</body>
	<script type="text/javascript">
	
		/**
		 * 具体参考说明: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage 
		 * postMessage要传递消息，要获取打开open的窗口
		 * 即本页面需要记录open的对象，otherWin
		 */
	
		var otherWin = null;
		function sendMsg(){
			var val = document.getElementById("msg").value;
			if(otherWin){
				otherWin.postMessage(val, "*");
			}
		}
		
		function sendMsgIframe(){
			var val = document.getElementById("msg").value;
			var frames = window.frames; // 获取当前window的所有iframe的对象
			for (var i = 0; i < frames.length; i++) {
			  frames[i].postMessage(val, "*");
			}
		}
		
		function sendMsgIframe2(){
			var val = document.getElementById("msg").value;
			var frame = document.getElementById("teIframe").contentWindow;
			frame.postMessage(val, "*");
		}
		
		function openNew(){
			otherWin = window.open("./postManage_2.html");
		}
		
		window.addEventListener("message", function(e){
			document.getElementById("msg").value = e.data;
		})
	</script>
</html>

postMessage_2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>其他窗口</title>
	</head>
	<body>
		<textarea row=10 style="width: 100%;" id="msg"></textarea>
		<button type="button" onclick="sendMsg()">发送消息</button>
	</body>
	<script type="text/javascript">
	
		/**
		 * 具体参考说明: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage 
		 * postMessage要传递消息，要获取触发打开open的窗口，
		 * 方式一： 监听消息，通过e.source得到
		 * 方式二：window.opener
		 */
		
		var win = window.opener ? window.opener : window.parent;  // 可以是window.open 或者iframe的形式
		function sendMsg(){
			var val = document.getElementById("msg").value;
			if(win){
				win.postMessage(val, "*");
			}
		}
		
		window.addEventListener("message", function(e){
			// fromWin = e.source;
			document.getElementById("msg").value = e.data;
		})
	</script>
</html>