跨域访问是指在一个域名的页面尝试访问另一个域名的资源。出于安全的考虑,浏览器实现了同源策略(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间通信的最好方法之一。