在Web开发中，iframe经常被用于在父页面中嵌入另一个页面或应用。然而，由于同源策略的限制，父页面和嵌入的iframe页面之间默认无法直接通信。尽管如此，通过一些巧妙的方法，我们可以实现iframe跨域调用，从而实现页面间的数据交互。本文将详细介绍几种常用的iframe跨域调用方法。

一、使用window.postMessage方法

window.postMessage是HTML5提供的一个API，允许窗口之间进行跨域通信。这种方法的核心思想是通过发送一个消息对象来传递数据，接收端监听message事件来接收消息。

1.1 发送消息

在父页面中，我们可以通过以下代码向iframe发送消息：

// 获取iframe元素
var iframe = document.getElementById('myIframe');

// 发送消息
iframe.contentWindow.postMessage('Hello, iframe!', 'http://example.com');

1.2 接收消息

在iframe页面中，我们可以通过监听message事件来接收消息：

// 监听message事件
window.addEventListener('message', function(event) {
    // 检查消息来源
    if (event.origin === 'http://parent.com') {
        console.log('Received message:', event.data);
    }
});

二、使用window.name属性

window.name属性可以在iframe中存储数据，并通过修改iframe的src属性来实现跨域通信。

2.1 设置数据

在父页面中，我们可以通过以下代码设置iframe的window.name属性：

// 获取iframe元素
var iframe = document.getElementById('myIframe');

// 设置window.name属性
iframe.contentWindow.name = 'Hello, iframe!';

2.2 读取数据

在iframe页面中，我们可以通过以下代码读取window.name属性：

// 读取window.name属性
console.log('Window name:', window.name);

三、使用CORS（跨源资源共享）

CORS是一种机制，允许服务器指定哪些外部域可以访问其资源。通过设置正确的CORS响应头，我们可以实现iframe跨域调用。

3.1 设置CORS响应头

在服务器端，我们需要设置以下CORS响应头：

Access-Control-Allow-Origin: http://parent.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: Content-Type

3.2 发送请求

在父页面中，我们可以通过以下代码发送跨域请求：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求方法和URL
xhr.open('GET', 'http://example.com/api/data', true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求
xhr.send();

3.3 处理响应

在父页面中，我们可以通过以下代码处理响应：

// 监听响应
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('Response:', xhr.responseText);
    }
};

四、总结

本文介绍了四种常用的iframe跨域调用方法，包括使用window.postMessage、window.name属性、CORS以及自定义通信协议。在实际开发中，我们可以根据具体需求选择合适的方法来实现页面间的数据交互。