请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

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

2023-07-13

要获取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);
  });

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部