在两个iframe之间传递参数的方法有哪些？

在两个 iframe 之间传递参数，主要有以下几种方法：

1. 使用postMessage API (推荐): 这是最推荐也是最标准的跨域 iframe 通信方式。它允许来自不同源的 iframe 安全地相互通信。

• 发送方 (iframe A):

// 获取目标 iframe 的 window 对象
const targetIframe = document.getElementById('targetIframe').contentWindow;

// 发送消息
targetIframe.postMessage(message, targetOrigin);

// message: 要发送的数据，可以是字符串、对象等，如果是对象，会被序列化。
// targetOrigin:  目标 iframe 的 origin，用于安全校验，可以是"*"表示任何 origin，但为了安全，建议指定具体的 origin。

// 示例：
const message = { name: 'John', age: 30 };
targetIframe.postMessage(message, 'http://example.com'); // 或者 '*'

• 接收方 (iframe B):

// 监听 message 事件
window.addEventListener('message', function(event) {
  // 检查消息来源 origin，确保安全
  if (event.origin !== 'http://example.com') { // 或者你期望的 origin
    return;
  }

  // 获取数据
  const receivedData = event.data;

  // 处理数据
  console.log('Received message:', receivedData);
});

2. 通过父窗口作为中介: 如果两个 iframe 位于同一个域，可以通过父窗口作为中介传递参数。

• iframe A:

// 将数据存储在父窗口的属性中
parent.dataFromIframeA = { name: 'John', age: 30 };

• iframe B:

// 从父窗口获取数据
const receivedData = parent.dataFromIframeA;

3. 使用window.name属性 (仅限字符串): window.name 属性值在不同页面之间导航时保持不变，可以用来在 iframe 之间传递字符串数据。 注意: window.name 只能存储字符串，并且大小有限制。

• iframe A:

window.name = JSON.stringify({ name: 'John', age: 30 });

• iframe B:

const receivedData = JSON.parse(window.name);

4. 通过 URL 参数传递 (有限制): 可以在 iframe 的 URL 中添加参数，然后在 iframe 内部解析 URL 获取参数。这种方法只适合传递少量数据，并且数据会暴露在 URL 中。

• 父窗口设置 iframe 的 src:

<iframe id="targetIframe" src="http://example.com/iframe.html?name=John&age=30"></iframe>

• iframe B (iframe.html):

// 解析 URL 参数
function getURLParameter(name) {
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(window.location.search);
  return results === null ? '' : decodeURIComponent(results[2].replace(/\+/g, ' '));
}

const name = getURLParameter('name');
const age = getURLParameter('age');

5. 使用本地存储 (localStorage/sessionStorage): 可以将数据存储在 localStorage 或 sessionStorage 中，然后在另一个 iframe 中读取。这种方法也要求 iframe 同域。 注意: 使用存储 API 时，需要监听 storage 事件以获得实时更新。

• iframe A:

localStorage.setItem('myData', JSON.stringify({ name: 'John', age: 30 }));

• iframe B:

const receivedData = JSON.parse(localStorage.getItem('myData'));

// 监听 storage 事件，以便在数据更新时得到通知
window.addEventListener('storage', function(event) {
  if (event.key === 'myData') {
    const newData = JSON.parse(event.newValue);
    // 处理新的数据
  }
});

选择哪种方法取决于你的具体需求和 iframe 之间的关系 (同域或跨域)。 postMessage 是最通用和安全的跨域通信方式，推荐优先使用。 如果 iframe 同域，则可以根据数据量和复杂度选择其他更简单的方法。