youtobelxz 2024-02-27 14:42 采纳率: 57.9%
浏览 16
已结题

iframe嵌套显示问题

img


这是iframe所显示的内容,之前一直显示拒绝连接,在后端配置好以后,又返回了这个json格式的数据,前端需要配置

这个标签吗
  • 写回答

23条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-02-27 14:42
    关注
    获得0.30元问题酬金

    引自微信小程序:皆我百晓生

    根据您的描述,您在一个 iframe 标签内加载内容时收到了 JSON 格式的数据而不是预期的HTML页面或资源。这通常意味着后端服务对于请求的URL返回了JSON响应,而 iframe 需要的是可渲染的网页内容。

    若要在前端正确处理这种情况,请确保以下几点:

    1. 检查 iframe 的 src 属性
      确认 iframesrc 属性指向的服务端接口或路由应该返回一个可嵌入并展示的HTML页面或者静态资源地址,而不是JSON API响应。

    2. 后端配合
      如果这个URL应该是用来获取HTML内容而不是JSON数据的,那么需要后端开发者检查为什么针对这个URL的请求会返回JSON错误信息。可能是一个路由配置错误或者API接口被误用。

    3. 前端处理逻辑
      如果确实应当从这个URL获取JSON数据用于前端逻辑处理而非直接展示,那么你应该通过JavaScript(Vue.js 中可以使用 axios 或 fetch 进行异步请求)来发送 AJAX 请求获取数据,而不是将其放在 iframe 中。

    例如,如果数据是要在父页面上展示或处理,你可以在 Vue 组件中使用 Axios 发送 GET 请求:

    // 假设你的 Vue 组件有 this.$http (已配置好的axios实例)
    this.$http.get('你的URL').then(response => {
      // 正确处理JSON响应
      const data = response.data;
      if (data.code !== 1) { // 根据实际情况处理错误码
        console.error(data.msg);
      } else {
        // 在这里处理正常的业务逻辑
      }
    }).catch(error => {
      console.error('请求失败', error);
    });
    

    总之,你需要根据实际应用场景调整前端逻辑或者与后端沟通以确保 iframe 能够加载正确的资源。如果是为了获取JSON数据并在父页面中使用,则不需要在 iframe 中配置什么,而是直接在Vue组件中发起AJAX请求获取数据。

    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 3月6日
  • 创建了问题 2月27日

悬赏问题

  • ¥15 Yolov5-7➕mobilebetv3,报错list index out of range
  • ¥15 有没有人会打学生成绩管理系统呀
  • ¥15 在使用Fiddler和夜神模拟器抓包的时候一直出现443该怎么办啊QAQ搜了好几个笔记都没有解决
  • ¥15 3x7的二维数组A、B、C,A中的任意1个数组元素与B的任意1个数组元素、同时又与C的任意1个数组元素比较,把不同位置出现相同数的比较称为无意义,反之称为有意义,把有意义的比较打印输出。
  • ¥20 预测模型怎么处理原始数据(随机森林)
  • ¥20 请问discuz3.5如何实现插入ckplayer全能播放器功能呢?
  • ¥15 thingsboard代码编译出错误
  • ¥15 博途v18仿真报错怎么解决
  • ¥15 欧姆龙plc枕式包装机 ST编程
  • ¥15 为啥快手广告联盟的广告这么难出来