如何在 iframe 中获取接口数据？

要获取iframe中的接口数据，需要先了解一下iframe的跨域问题：

1. 同源策略：浏览器的同源策略规定，如果两个页面的协议、域名或端口不一致，则不能相互访问对方的数据，这样可以防止恶意网站窃取数据。

2. 跨域访问iframe的限制：如果父页面和iframe页面不属于同一个域名，那么在iframe页面中无法直接访问父页面的DOM和JavaScript对象，反过来也一样。

解决方案：

1. 如果子页面和父页面属于同一个域名，那么可以使用window.parent或者top来获取父页面的DOM和JavaScript对象。

2. 如果子页面和父页面不属于同一个域名，那么可以使用window.postMessage来进行跨域通信，父页面通过监听message事件来接收子页面发送过来的数据。

3. 如果子页面和父页面不属于同一个域名，而且无法修改子页面的代码，那么可以使用后端代理来解决跨域问题，父页面通过发起后端请求来获取子页面的数据。

代码实现：

1. 如果子页面和父页面属于同一个域名：

// 在子页面中使用
var data = window.parent.document.getElementById('myIframe').contentWindow.document.getElementById('data').innerHTML;
console.log(data);

// 在父页面中使用
var data = document.getElementById('myIframe').contentWindow.document.getElementById('data').innerHTML;
console.log(data);

1. 如果子页面和父页面不属于同一个域名，可以使用postMessage来进行跨域通信：

// 在子页面中使用
window.parent.postMessage({type: 'getData'}, '*');

// 在父页面中使用
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') {
    return;
  }
  if (event.data.type === 'getData') {
    var data = document.getElementById('myIframe').contentWindow.document.getElementById('data').innerHTML;
    console.log(data);
  }
}, false);

1. 如果子页面和父页面不属于同一个域名，而且无法修改子页面的代码，可以使用后端代理来解决跨域问题：

// 在父页面中使用
fetch('http://example.com/getData')
  .then(function(response) {
    return response.text();
  })
  .then(function(data) {
    console.log(data);
  });