【跨域传值】是指在Web开发中，由于同源策略的限制，主页面与不同源的`iframe`之间无法直接进行数据交换。但通过一些技术手段，开发者可以实现主页面与`iframe`之间的通信，以达到数据共享的目的。本文将详细介绍两种常见的跨域传值方法。
### 需求一：主页面A向`iframe B`传递数据
#### 实现方式
1. 利用`location.hash`：主页面A可以通过修改`iframe`的`src`属性，添加一个`#data`字符串来传递数据。例如，`<iframe id="frameB" src="http://test.com/iframePage.html#data=传输的信息"></iframe>`。`iframe B`中可以通过监听`hash`变化来获取数据，通常使用`setInterval`设置定时器检查`location.href`的变化。
```javascript
// iframe B 的 JS 代码
var iframeB = window;
(function loop() {
if (iframeB !== window.top) {
iframeB = iframeB.parent;
}
if (iframeB.location.hash) {
var data = iframeB.location.hash.slice(1);
// 处理接收到的数据
handleReceivedData(data);
clearInterval(loop); // 停止定时器
} else {
setTimeout(loop, 100); // 检查间隔
}
})();
```
### 需求二：`iframe B`向主页面A传递数据
#### 实现方式
1. 使用代理`IframeC`：创建一个与主页面A同源的`IframeC`，嵌入到`iframe B`中。`iframe B`通过`IframeC`将数据传递给`IframeC`，然后`IframeC`再将数据传递给主页面A。`IframeC`可以使用`window.top`或`window.parent.parent`来访问主页面A。
```javascript
// iframe B 的 JS 代码
function sendDataToMainPage(data) {
var iframeC = window;
while (iframeC !== window.top) {
iframeC = iframeC.parent;
}
iframeC.postMessage(data, '*'); // 使用 postMessage 发送数据
}
// 主页面A的 JS 代码
window.addEventListener('message', function(event) {
if (event.origin === 'http://test.com') { // 验证来源是否安全
var receivedData = event.data;
// 处理接收到的数据
handleReceivedData(receivedData);
}
}, false);
```
### 注意事项与实现细节
1. **易用性、可扩展性和可维护性**：提供一个公共的JS种子文件，供第三方应用加载。将功能组织成模块，按需加载，避免不必要的性能开销。
2. **数据分类**：对传递的数据进行分类管理，如自我调用、登录验证、数据传递等，确保数据安全且易于处理。
3. **数据格式**：建议使用JSON格式，保证数据结构清晰且易于解析。通过统一的接口发送和接收数据，遵循一定的规范，便于调用相应方法。
4. **版本控制**：采用向后兼容策略，小版本更新通过服务器缓存策略控制，大版本更新则由用户手动处理，减少对第三方应用的影响。
以上方法虽然有效，但并非唯一解决方案。在实际应用中，开发者还需要考虑浏览器兼容性、安全性等问题，并持续优化方案。例如，`postMessage` API 是现代浏览器支持的更安全、更灵活的跨域通信方式，但老版本浏览器可能不支持，需要有备选方案。同时，对于敏感数据，应进行加密处理，确保数据在传输过程中的安全性。
