父页面跨域获取iframe页面的值

跨域访问是指在一个域名的页面尝试访问另一个域名的资源。出于安全的考虑，浏览器实现了同源策略（same-origin policy）。这意味着，如果两个页面的协议、域名或端口有任何一个不相同，它们就不能直接访问对方的内容。但是，有一些方法可以绕过这个限制，来安全地实现跨域通信。

## 使用window.postMessage

最推荐和最安全的方法是使用`window.postMessage`方法，这是HTML5引入的一种安全的跨源通信方式。

### 步骤：

1. **父页面发送消息到iframe：**

父页面通过`iframe.contentWindow.postMessage`方法向iframe页面发送消息。

```javascript

// 父页面
var iframe = document.getElementById('myIframe');
var targetOrigin = 'http://iframe所在域'; // 设置为确切的URL以提升安全性
iframe.contentWindow.postMessage('Hello there!', targetOrigin);

2. **iframe页面接收并处理消息：**

iframe页面通过监听`message`事件来接收消息，并可以根据需要响应消息。

```javascript
 

// iframe页面
window.addEventListener('message', function(event) {
    // 检查event.origin是否是我们预期的origin，以增加安全性
    if (event.origin !== 'http://父页面域') {
        return;
    }

    console.log('Received message: ', event.data);
    // 你可以根据需要处理消息，甚至回复消息
    event.source.postMessage('Hi, parent!', event.origin);
});

3. **父页面接收回复消息：**

父页面也需要监听`message`事件，以接收来自iframe的回复。

```javascript

// 父页面
window.addEventListener('message', function(event) {
    if (event.origin !== 'http://iframe所在域') {
        return;
    }

    console.log('Received reply: ', event.data);
    // 处理来自iframe的回复
});

### 注意事项：

- **安全性：**务必检查`event.origin`，并验证它是否来自你预期的源，以避免安全漏洞。
- **性能：**考虑到性能和资源利用，不应该过度依赖`postMessage`进行频繁的跨域通信。

使用`window.postMessage`可以在跨域环境下实现安全、有效的数据通信，这是实现父页面与iframe间通信的最好方法之一。