【JS】postMessage 用法（可以给iframe传值）

news2024/11/18 23:23:22

文章目录

- 基本概念
- 代码案例

基本概念

跨文档消息，有时候也简称为XDM(cross-document messaging)

是一种在不同执行上下文（如不同源的页面）间传递信息的能力。
例如：www.wrox.com上的页面想要与包含在内嵌窗格中的p2p.wrox.com上面的页面通信
XMD的核心就是postMessage()方法

postMessage()方法：将message传递给指定窗口
postMessage(data,origin)方法接受两个参数：

let iframeWindow = document.getElementById('myframe').contentWindow;
iframeWindow.postMessage('aaa', 'http://www.wrox.com');
1. data: 
- 要传输的数据，推荐使用字符串格式，其他格式的浏览器的兼容性不好
- 如果要传输结构化数据，可以通过JSON.stringify处理，接收时用JSON.parse转换回来
2. origin: 
- 指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写
- 如果不想限制接收目标源：可以传 '*'
- 如果目标与当前窗口同源：可以传 '/'

接收消息

window.addEventListener('message',(event)=>{
	// 判断源路径是否来自预期发生者
	if(event.origin.includes('http://www.wrox.com')){
		// 获取传过来的数据
		console.log(event.data)
		// 再传回去一条消息
		event.source.postMessage('已收到消息', 'p2p.wrox.com')
	}
})
// event包含3个参数
- event.data: 接收到的数据
- event.origin: 发送消息的文档源
- event.source: 发生消息的文档中window对象的代理

代码案例

在这里插入图片描述

父页面（main.html）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>主页面</h1>
        <iframe id="child" src="./child.html"></iframe>
        <div>
            <h2>主页面跨域接收消息区域</h2>
            <div id="message"></div>
        </div>
    </body>
    <script>
        /* -------------iframe跨域数据传递--------------- */
        
        //传递数据到子页面
        window.onload = function() {
            document.getElementById('child').contentWindow.postMessage("主页面消息", "/")
        }
        //接受子页面传递过来的数据
        window.addEventListener('message', function(event) {
            document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
        }, false);
    </script>
</html>

子页面（child.html）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>子页面: </h1>
        <div>
            <div id="message"></div>
        </div>
    </body>
    <script>
		//接收父页面传过来的数据
		window.addEventListener('message', function(event) {
			// 因此判断接收的消息源是否是父页面
			if (event.origin.includes("http://127.0.0.1:8848")) {
				console.log(event);
				document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
	
				//把数据传递给父页面 > top.postMessage(要传递的数据,父页面的url访问地址)
				window.top.postMessage("子页面消息收到", 'http://127.0.0.1:8848');
			}
		}, false);
	</script>
</html>