请求的接口响应状态为已取消的原因

news/2024/7/17 4:30:45

有趣的iframe问题

今天遇到一个问题,当点击了按钮----跳转页面时----F12键点击网络中的状态报了已取消,类型是

document说明是前端页面的问题,如果是xhr那可能是接口的问题。

原本是写了3个iframe,页面刷新的时候请求了第一个iframe,然后就经过vue的那一层又重新请求了一遍,所以就有了报错

原来代码如下:

<div id="app"><el-tabs><div slot="label" @click="handleClick("tab1")" ><i class="el-icon-date"></i>张三</div><div v-if="tab=='tab1'"><iframe id="userzhangsan" height="750" width="100%" frameborder="0" src="../hahah"></iframe></div></el-tabs><el-tabs><div slot="label" @click="handleClick("tab2")" ><i class="el-icon-date"></i>李四</div><div v-if="tab=='tab1'"><iframe id="userlishe" height="750" width="100%" frameborder="0" src="../hahah"></iframe></div></el-tabs><el-tabs><div slot="label" @click="handleClick("tab2")" ><i class="el-icon-date"></i>王五</div><div v-if="tab=='tab1'"><iframe id="userwangwu" height="750" width="100%" frameborder="0" src="../hahah"></iframe></div></el-tabs>
<div>

解决方案就是写个for循环就行

<div id="app" class="app-content" v-cloak><el-tabs type="border-card" :lazy="true"><el-tab-pane v-for="(tabItem, index) in tabs" :key="index"><div :slot="'label'" @click="handleClick(tabItem.name)"><i :class="tabItem.icon"></i> {{ tabItem.label }}</div><div v-if="tab === tabItem.name"><iframe :id="tabItem.iframeId" :height="tabItem.height" :width="tabItem.width" frameborder="0" :src="tabItem.src"></iframe></div></el-tab-pane></el-tabs>
</div>

这里补充一下:还有其它情况的请点击链接:前端页面被取消的重复请求 - 掘金


https://www.xjx100.cn/news/3091913.html

相关文章

第四代智能井盖传感器,实时守护井盖位安全

城市管理中井盖的安全问题始终是一个不容忽视的方面。传统的巡检方式不仅效率低下&#xff0c;无法实现实时监测&#xff0c;而且很难准确掌握井盖的异动状态。因此智能井盖传感器的应用具有重要意义。这种智能传感器可以帮助政府实时掌握井盖的状态&#xff0c;一旦发现异常情…

Vue 优雅的减少请求次数

文章目录 前言Java代码Vue代码改造前改造后前言 当开发一个应用程序或者网站时,我们经常需要从后端获取一些数据来展示给用户。在某些情况下,我们可能需要获取多个属性的值,而不是单独获取每个属性的值。这时,我们可以使用一次请求获取多个属性的值,以减少网络请求的次数…

影视行业如何远程完整快速传输大文件?

影视行业是一个充满创意和协作的领域。在影视制作中&#xff0c;涉及到多个环节和部门&#xff0c;包括编剧、导演、摄影、剪辑、配音、视效等。这些环节和部门通常分布在不同的地点&#xff0c;甚至不同的国家。因此&#xff0c;影视制作过程中需要频繁进行远程传输&#xff0…

深度学习动物识别 - 卷积神经网络 机器视觉 图像识别 计算机竞赛

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

【图数据库实战】gremlin语法

Gremlin 是 Apache TinkerPop 的图遍历语言。Gremlin 是一种函数式数据流语言&#xff0c;使用户能够简洁地表达对其应用程序属性图的复杂遍历&#xff08;或查询&#xff09;。每个 Gremlin 遍历都由一系列&#xff08;可能嵌套的&#xff09;步骤组成。步骤对数据流执行原子操…

20天拿下华为OD笔试之【DP/贪心】2023B-观看文艺汇演【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 【DP/贪心】2023B-观看文艺汇演题目描述与示例输入输出示例一输入输出说明 示例二输入输出说明 示例三输入输出 解题思路原始数据处理贪心思想求解问题动态规划求解问题 代码解法一&#xff1a;贪心时空复杂度 解法二&#xff1a;DP时空复杂度 华为OD算法冲刺训练 【D…

场景中的解剖学方向标记_vtkAnnotatedCubeActor

开发环境&#xff1a; Windows 11 家庭中文版Microsoft Visual Studio Community 2019VTK-9.3.0.rc0vtk-example参考代码 demo解决问题&#xff1a;显示标记当前视角、空间的方位&#xff0c;关键对象vtkAnnotatedCubeActor: vtkAnnotatedCubeActor 是一个混合3D 演员&#xf…

YOLOv8-Seg改进:位置信息的轴线压缩增强注意力Sea_Attention| ICLR2023 SeaFormer,轻量级语义分割算法,复旦大学和腾讯

🚀🚀🚀本文改进:位置信息的轴线压缩增强注意力Sea_Attention,一方面将QKV特征进行轴线压缩后再注意力增强,另一方面将QKV特征使用卷积网络提升局部信息,最后将二者融合,输出增强特征 🚀🚀🚀Sea_Attention小目标分割首选,暴力涨点 🚀🚀🚀YOLOv8-seg创新…