两个iframe之间如何传数据 - 问答

两个iframe之间可以通过以下几种方式传递数据：

使用postMessage方法：使用postMessage方法可以在不同的iframe之间安全地传递数据。一个iframe可以使用postMessage方法将数据发送给另一个iframe，然后另一个iframe监听并接收数据。可以通过以下代码在iframe A中发送数据给iframe B：

// 在iframe A中发送数据给iframe B
var targetIframe = document.getElementById('iframeB');
targetIframe.contentWindow.postMessage('Hello from iframe A!', '*');

然后在iframe B中监听并接收数据：

// 在iframe B中监听并接收数据
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://iframeA.com') return; // 验证消息来源
  console.log('Received data from iframe A: ', event.data);
});

在接收消息的iframe中可以通过event.data获取发送的数据。

使用localStorage：localStorage是浏览器提供的一种存储数据的机制，可以在不同的iframe之间共享数据。一个iframe可以将数据存储在localStorage中，然后另一个iframe可以读取这些数据。可以通过以下代码在iframe A中存储数据：
```
// 在iframe A中存储数据
localStorage.setItem('data', 'Hello from iframe A!');
```
然后在iframe B中读取这些数据：
```
// 在iframe B中读取数据
var data = localStorage.getItem('data');
console.log('Received data from iframe A: ', data);
```
请注意，在使用localStorage时需要注意数据的安全性和正确的清理机制。
使用window.parent对象：如果两个iframe处于同源（即来自同一个域名），可以使用window.parent对象直接访问父窗口的全局变量和方法。一个iframe可以通过window.parent对象设置父窗口的变量，然后另一个iframe可以直接读取这些变量。请注意，这种方法要求两个iframe来自同一个域名。

在iframe A中设置父窗口的变量：
```
// 在iframe A中设置父窗口的变量
window.parent.myData = 'Hello from iframe A!';
```
然后在iframe B中读取这个变量：
```
// 在iframe B中读取父窗口的变量
var data = window.parent.myData;
console.log('Received data from iframe A: ', data);
```
请注意，这种方法只适用于同源的iframe之间，并且可能会导致全局变量的命名冲突问题。

这些方法可以根据实际情况选择适合的方式传递数据。

0 赞

0 踩