Vue中iframe的使用技巧与坑点-CSDN博客

本文链接：https://blog.csdn.net/cxllRNGNB/article/details/119036149

本文总结了在Vue项目中使用iframe的一些经验，包括如何根据侧边栏和tab栏动态新增、切换和删除iframe标签页，以及iframe子页面如何调用父级页面的函数。尽管iframe技术陈旧且存在缓存和响应速度问题，但在某些场景下仍不可避免。建议尽量避免使用，以减少潜在问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iframe使用小结、案例

虽然iframe框架技术已经非常老旧,但因为项目要求不得不品尝这一口老坛酸菜，框架的缓存机制和缓慢的响应速度恶心了我一整个项目开发周期，尽量不要用它

需求：使用vue,实现单页面内,点击侧边栏与tab栏,新增、切换、删除iframe标签页

在这里插入图片描述

html代码示例:

			<!-- tab栏,可点击切换,删除标签页 -->
			<nav class="hdNav">
				<ul class="clearfix">
					<li
						v-for="(item, index) in navList"
						:key="index"
						:class="{'act':item.xid==navActObj.xid}"
						@click='navClick(item)'
					>
						{{item.title}}
						<span @click.stop='navClose(item)'></span>
					</li>
				</ul>
			</nav>

					<!-- elementUI的菜单栏,点击可添加/切换iframe标签页 -->
					<el-menu
						class="el-menu-vertical-demo"
						text-color="#000"
						active-text-color="#fff"
						:default-active="menuAct"
						:active="menuAct"
					>
                        <!-- 可通过 active属性绑定变量，更改变量的值即可改变菜单内激活的项 -->
						<el-submenu
							v-for="(obj, index) in menuList"
							:key="index"
							:index="obj.code"
						>
                            <!-- index为菜单的唯一标识 -->
							<template slot="title">{{obj.name}}</template>
							<el-menu-item
								v-for="(item, ind) in obj.children"
								:key="ind"
								:index="item.code"
								@click='menuClick(item)'
							>
								{{item.name}}
							</el-menu-item>
						</el-submenu>
					</el-menu>

					<!-- iframe标签  通过遍历 存放标签页的数组,生成-->
					<iframe
						v-for="(item, index) in navList"
						:key="index"
						:src="item.iframeSrc"
						frameborder="0"
						:class="{'act':item.xid==navActObj.xid}"
					></iframe>
					<!-- 通过判断当前激活的标签栏的id,动态添加class,显示 -->

js代码:

methods: {
    	//菜单栏点击事件	将菜单对象传入,进行判断
		menuClick: function (obj) {
			let ii = this.navList.findIndex((item) => {
				return item.xid == obj.xid;
			});
			if (ii == -1) {
				//新的一级菜单的页面,添加
				this.navList.push(obj);
			} else if (this.navList[ii].iframeSrc != obj.iframeSrc) {
				//旧的一级菜单的新页面,覆盖
				this.navList.splice(ii, 1, obj);
			}
            	//旧的一级菜单的旧页面,就直接切换标签页,显示旧iframe
			this.navActObj = obj;
			this.menuAct = obj.code;
		},
            //tab标签栏点击事件	切换激活的标签页,更改菜单栏的激活变量
		navClick: function (obj) {
			this.navActObj = obj;
			this.menuAct = obj.code;
		},
            //tab标签页关闭事件	删除标签页,进行判断
		navClose: function (obj) {
			let ii = this.navList.findIndex((item) => {
				return item.xid == obj.xid;
			});
			let newI;
			let len = this.navList.length;
			if (len == 1) {
                //数组长度仅为一,代表删除后无任何标签页,置空
				this.navActObj = { xid: -1, code: "0" };
				this.menuAct = "0";
			} else {
                //判断当前标签页是否为最后一项,
                //不是时,将数组的后一位标签页激活,
                //是最后一项时,将前一位激活
				newI = ii != len - 1 ? ii + 1 : ii - 1;
				this.navActObj = this.navList[newI];
				this.menuAct = this.navActObj.code;
			}
			this.navList.splice(ii, 1);//删除当前项
		},
	},

2、iframe子页面调用父级页面的函数

window.parent iframe页面调用父页面对象

父级页面：

function indexAddPage(obj){
    app.menuClick(obj);
}

子级iframe页面:

let obj1 = {
	name:'123',
    iframeSrc:'http://baidu.com'
}
window.parent.indexAddPage(obj1);