window.postMessage 跨窗口,跨iframe javascript 通信

同源通信

执行它们的页面位于具有相同的协议(http/https),端口(80/443),主机(通常为域名) 时,这两个脚本才能相互通信

大多数情况下,网站就是内部的域名,所以是同源通信,可以相互访问

非同源通信

不同域名,不同窗口,内嵌iframe(可能是外部域名地址) 这种就是非同源通信,

window.postMessage() 方法可以安全地实现跨源通信

来自H5 api,没想到吧,h5还有个这样的方法*.*

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

  1. otherWindow 其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

  2. message 将要发送到其他 window的数据,字符串,数字等 javascript 基本类型以及对象

  3. targetOrigin 通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口

用法

  1. 发送数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="color" onchange="setMessage(this.value)">
<iframe id ='iframe' src="good.html"></iframe>

<script>
    // 发送消息
    var domain = 'http://localhost:63342';
    var iframe =  document.getElementById('iframe').contentWindow;

    var setMessage = function (color){
        iframe.postMessage(color,domain);
    }

    window.addEventListener('message',function(event){
        if(event.origin !== domain) return
        console.log('main receive ' + event.data);
    })
</script>
</body>
</html>
  1. 监听事件,处理消息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>good</title>
</head>
<body>
<h1 style="text-align: center;color: black;">看我在便颜色</h1>
</body>
<script>
    // 响应消息
    window.addEventListener('message',function(event){
        if(event.origin !== 'http://localhost:63342') return;
        document.body.style.backgroundColor = event.data;
        document.body.innerHTML = event.data;
        event.source.postMessage('good idea ',event.origin);
    },false);

</script>
</html>

上一篇:Java - io输入输出流 --转换流


下一篇:javascript – 在postmessage中指定多个targetOrigin uris