正文

window.postMessage()实现(iframe嵌套页面)跨域消息传递

IP云
IP云V管理员/14 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在页面和嵌入其中的iframe之间。

不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制相对来安全地规避这个限制。

发送消息的基本语法：

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

targetWindow 就是接收消息的窗口的引用。 获得该引用的方法包括：

  • Window.open
  • Window.opener
  • HTMLIFrameElement.contentWindow
  • Window.parent
  • Window.frames +索引值

message 就是要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。

targetOrigin 就是指定目标窗口的来源，必须与消息发送目标相一致，可以是字符串“*”或URI。 *表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。

transfer 是可选参数

接收端： 

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){

  if (event.origin !== "http://127.0.0.1:3808/")

    return;

}

 
event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。

完整示例：

1、父页面 

  <title>father</title>

</head>

<body>

  <div style="width: 200px;float: left;margin-right: 200px;border: 1px solid #333;">

    <div id="color"> frame color</div>

  </div>

  <div>

    <iframe id="child" src="http://127.0.0.1:3808/iframe-son/index.html"></iframe>

  </div>

  <script>

    window.onload = function() {

      // 初始化div颜色

      window.frames[0].postMessage('getcolor', 'http://127.0.0.1:3808/');

    }

    window.addEventListener('message',function(e) {

      // 监听子页面颜色的改变即发送的消息，设置div颜色

      var color = e.data;

      document.getElementById('color').style.backgroundColor = color;

    },false)

  </script>

</body>

</html>

2、子页面 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>son</title>

</head>

<body>

  <div id="container" onclick="changeColor();" style="width: 100%; height: 100%;background-color: rgb(204,102,0)">

    click to change color

  </div>

  <script>

    var container = document.getElementById('container');

    //监听父页面传递过来的信息

    window.addEventListener('message', function (e) {

      if(e.source != window.parent) return ;

      // container.innerHTML = e.data

      var color = container.style.backgroundColor;

      window.parent.postMessage(color,'*');

    },false)

    //改变颜色的方法

    function changeColor() {

      var color = container.style.backgroundColor;

      if(color=='rgb(204, 102, 0)'){

        color='rgb(204, 204, 0)';

      }else{

        color='rgb(204,102,0)';

      }

      container.style.backgroundColor = color;

      // 给父元素发送消息

      window.parent.postMessage(color,'*');

    }

  </script>

</body>

</html>

相关阅读

目录[+]