【JS】postMessage 用法(可以给iframe传值)

文章目录

    • 基本概念
    • 代码案例

基本概念

跨文档消息,有时候也简称为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对象的代理

代码案例

  • 目录结构:

【JS】postMessage 用法(可以给iframe传值)_第1张图片

  • 父页面(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>
  • 运行结果:

【JS】postMessage 用法(可以给iframe传值)_第2张图片

你可能感兴趣的:(JavaScript,笔记,javascript,postMessage)