window.postMessage解决跨域

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了window.postMessage解决跨域相关的知识,希望对你有一定的参考价值。

一、基本原理

html5为了解决跨域,引入了跨文档通信API(Cross-document messaging)。这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。Internet Explorer 8+, chrome,Firefox , Opera和Safari 都支持这个功能。

二、测试步骤

1、创建a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.postMessage解决跨域a.html</title>
</head>
<body>
<script>
    window.onload = function() {
        var subwin = window.open(http://localhost:8081/b.html, title);
        //父窗口http://localhost:8080/a.html向子窗口http://localhost:8081/b.html发消息,调用postMessage方法。
        subwin.postMessage(我要给你发消息了!, http://localhost:8081);
    }
    window.addEventListener(message, function(e) {
      console.log(a.html接收到的消息:, e.data);
    });
</script>
</body>
</html>

发送消息,监听消息。

2、创建b.html

<script>
  var messageFunc = function (event) {  
      if(event.source != window.parent) {
        return;
      }
      var data = event.data,//消息  
      origin = event.origin,//消息来源地址  
      source = event.source;//源Window对象  
      if(origin == "http://localhost:8080"){  
        console.log(b.html接收到的消息:, data);
      }  
      source.postMessage(我已经接收到消息了!, origin);
    };  
    if (typeof window.addEventListener != undefined) {  
      window.addEventListener(message, messageFunc, false);  
    } else if (typeof window.attachEvent != undefined) {  
      window.attachEvent(message, messageFunc);  
    }
</script>

3、打开两个http服务器技术分享

4、打开浏览器就可以看到结果:http://localhost:8080/a.html

以上是关于window.postMessage解决跨域的主要内容,如果未能解决你的问题,请参考以下文章

跨域通信--Window.postMessage()

使用window.postMessage进行iframe跨域数据通信

使用window.postMessage()方法跨域通信

使用window.postMessage()方法跨域通信

使用window.postMessage()方法跨域通信

使用window.postMessage()方法跨域通信