简述html 中的 postMessage

最新推荐文章于 2025-07-23 12:17:42 发布

原创最新推荐文章于 2025-07-23 12:17:42 发布 · 749 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#postMessage #iframe #cross-origin #message #跨域

html 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用postMessage方法解决iframe跨域数据传输问题，详细解释了postMessage(data,origin)方法的参数及其使用场景，包括如何在不同窗口间安全地进行异步通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相关事例请参考：
使用 postMessage 解决 iframe 跨域数据传输

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

发送数据：

<script type="text/javascript">
	window.onload = function() {
		window.document.onclick = function() {
			window.parent.postMessage("", "*");
		};
	};
</script>

接收数据：

// 接收 iframe 传回的事件
    window.addEventListener('message',function(e){
        console.log(e);
        View.onPageClickEvent(e.data);
    },false);

对于 message 事件传回的 event 参数如下：
在这里插入图片描述
有几个重要属性

data：顾名思义，是传递来的message
source：发送消息的窗口对象
origin：发送消息窗口的源（协议+主机+端口号）