简述html 中的 postMessage

迈不过友情╰ 2022-03-18 05:58 137阅读 0赞

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

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

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

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

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

发送数据：

接收数据：

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

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

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

[postMessage _ iframe]: https://blog.csdn.net/hsl0530hsl/article/details/87718819
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20220318/58c9ca7a647547ada7f525473de12f41.png