iframe父传子如何传值

一、描述

通常情况下，一个窗口（无论是父窗口还是iframe窗口）不能直接访问另一个窗口的JavaScript变量或DOM，尤其是当这两个窗口处于不同的域时，这是因为浏览器的同源策略（Same-Origin Policy）限制了这种交互。

但是，你可以在父窗口中执行Ajax请求，并通过postMessage机制将数据转发给iframe窗口。以下是一个简单的示例流程：
1.父窗口发起Ajax请求：
  在父窗口中发起Ajax请求，从服务器获取数据。
2.父窗口发送数据到iframe：
  当Ajax请求成功并返回数据后，父窗口可以使用postMessage方法将数据发送给iframe。
3.iframe监听消息：
  iframe窗口需要监听message事件，以便在接收到消息时处理数据

二、父窗口（Parent Window）

// 发起Ajax请求
axios.get('/api/data')
  .then(function(response) {
      var data = response.data;
      
      // 获取iframe的contentWindow
      var iframe = document.getElementById('your_iframe_id');
      var targetWindow = iframe.contentWindow;
      
      // 将数据发送给iframe
      targetWindow.postMessage(data, '*'); // 注意，'*'意味着任何源都可以接收消息，但在生产环境中应该更改为具体源以提高安全性
  })
  .catch(function(error) {
      console.error(error);
  });

三、iframe窗口（Child Window）

// 监听message事件
window.addEventListener('message', function(event) {
    // 检查源是否正确（在实际应用中，应替换为正确的源）
    if (event.origin !== 'http://parent-origin.com') return;

    // 处理接收到的数据
    var data = event.data;
    console.log('Received data:', data);
    
    // 这里可以进行进一步的数据处理或更新DOM
}, false);