使用postMesssage()实现iframe跨域页面间的信息传递

在Web开发中，由于同源策略的限制，跨域iframe页面间的信息传递是一个常见的问题。为了解决这一难题，HTML5提供的`postMessage()` API成为了一种有效的解决方案。下面我将详细介绍如何使用`postMessage()`实现iframe跨域页面间的信息传递。

由于同源策略的限制，当我们在网页中使用跨域iframe时，主页面和子页面之间默认是无法直接通信的。通过一系列的方法尝试，我们发现了一种解决方案。

其中，一种方法是子页面通过url传参，即将需要传递的参数添加到与主页面同源的url上，然后重定向到该url。但这种方法过程复杂，且存在一定的安全隐患，因此并不推荐使用。

另一种更为可靠和安全的方法是使用`postMessage()` API。这是一个基于事件的消息传输API，可以实现跨文档、多窗口、跨域的消息传递。

在子页面中，我们可以使用`postMessage()`方法发送消息。这个方法接受两个参数：第一个是要传递的数据，第二个是指明目标窗口的源。由于部分浏览器只能处理字符串参数，我们需要先将参数序列化为字符串，然后再发送。接收消息的页面可以通过监听window的message事件来获取这些消息。

具体实现如下：

发送消息（子页面）：

```javascript

function sendMessage(param) {

var url;

if (param.url) {

url = param.url;

}

var dataJson = JSON.stringify({ type: 1, a: param.a, b: param.b, c: param.c, url: url });

window.parent.postMessage(dataJson, ''); // 向父页面发送消息

}

```

接收消息（主页面）：

在主页面中，我们可以通过监听window的message事件来接收子页面发送的消息。当接收到消息时，我们可以通过消息的data属性来获取传递的数据。然后根据数据类型进行相应的处理。

```javascript

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

var data = JSON.parse(e.data); // 接收到的消息数据

switch (data.type) {

case 1:

alert(data.a); // 处理接收到的消息

break;

// 其他处理逻辑...

}

}, false);

```

message事件有几个重要属性，包括data（传递来的消息）、source（发送消息的窗口对象）和origin（发送消息窗口的源）。通过`postMesssage()`方法和message事件，我们可以实现跨域传递消息。需要注意的是，在实际应用中，我们需要根据具体情况调整发送和接收消息的窗口对象。以上示例中是从子页面向父页面传递消息，如果是从主页面向子页面传递消息，则需要相应地调整发送和接收消息的窗口对象。使用`postMessage()` API可以方便、安全地实现iframe跨域页面间的信息传递。希望以上内容对大家有所帮助！