vue 使用iframe标签切换不同项目，实现步骤（互相嵌套，高度不适应（底部出现白条-随着切换越来越大）传值取值（免登录），内容空白缓存问题）

本文主要是介绍vue 使用iframe标签切换不同项目，实现步骤（互相嵌套，高度不适应（底部出现白条-随着切换越来越大）传值取值（免登录），内容空白缓存问题），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

最近在开发中，由于是合作开发。双方已经有自己的前后端代码，最终需要整合代码上线测试
由于模块功能不同，双方ui并没有提前统一设计风格，并且已经开发完毕。
前后端如果直接合并到对方项目（前端-有各种冲突-后端鉴权-业务场景不一样）导致.......
后来最好的解决办法就是，通过iframe标签带参数来回切换对方项目

实现步骤

1.首先思路明确（文档能力）- 双方前端项目合并可能出现问题

前端工程已经分离社会端，监管端（支队-总队-服务端），登录方式不一（鉴权方式不一）
整体布局风格不统一，代码规范不统一，公共组件不统一，合并之后需要大量时间修改调整细节
命名冲突，合并代码之后可能应为组件名，路由名，文件资源名，类名重名，导致代码报错需要修改多处
前端用户体系框架业务代码已经完善，合并之后冲突。导致业务逻辑代码需要大量时间重构调试
前端工程分开独立部署，可以通过代码层面区分社会端，监管端（支队-总队-服务端）。合并之后无法区分
前端全局处理机制不一样，合并之后冲突。导致统一处理失效。（全局状态码-统一错误处理，机制处理）
前端第三方库版本不一，合并之后。可能因为部分库版本对不上导致部分api，功能失效，出现兼容性问题

2.代码实现

// HTML代码
<divclass="app-haiyun"v-if="sirenindex == 2 "><iframe:src="iframeUrl"style="width: 100%; height: 100%; border: 0"></iframe></div>// 传递地址访问别人项目-别人项目接受参数免登录-浏览器缓存问题
// 3个参数
// 第一个参数当前时间戳-防止第二个项目有默认路径参数导致参数取不到-防止iframe请求参数一样导致浏览器触发缓存导致boday加载不出来（第二个项目）
// 第二个参数第二个项目token-拿来做免登录处理
// 第三个参数业务参数-可以不要
// 获取token
let Token = getToken()

let time = new Date().getTime()
// 路径传参-项目二地址+参数
// this.iframeUrl = `http://192.168.2.23:3000?time=${time}&validToken=${haiyunToken}&menuType=2`
// 开启iframe标签开关
this.sirenindex = 2

// 第二个项目-接受参数（可以在指定页面接受，也可直接写在登录页（因为导航守卫会把没token打回登录页））mounted () {// 参数处理// 解析URL中的查询字符串console.log('window.location', window.location)
console.log('window.location.search',decodeURIComponent(window.location.search))const urlParams = new URLSearchParams(decodeURIComponent(window.location.search))console.log("urlParams", urlParams);console.log("validToken", urlParams.get("validToken"));console.log("menuType", urlParams.get("menuType"));console.log("time", urlParams.get("time"));}



// 样式-整屏切换-高度100vh 防止底部出现白条-导致来回切换项目时底部白条空隙越来越大
.app-haiyun {position: fixed;top: 0;left: 0;z-index: 99999;width: 100vw;height: 100vh;
}

细节优化

1.须知

首相2个项目是假合并，让用户感觉不出来。所以2个项目的用户数据数据和token有效期是一样的
第一个项目通过iframe标签跳转到第二个项目需要登录，再通过刷新或者返回时第一个项目不需要登录
如果是通过2个按钮来切换项目记得使用浏览器缓存，因为在第二个项目刷新时默认会返回第一个项目
切换时我们打开浏览器缓存可以看到是2个地址缓存，隔离开来，并且在请求栏可以看到2个项目请求

2.高度适应问题-底部出现白条，随着iframe来回切换项目导致底部白色间隙越来越大，项目布局失衡

解决：在iframe外面套一层div-设置100vw，100vh。iframe标签100%，边框为0

3.2个项目免登录问题

首相我们在第一个项目传递token时最好是在iframe地址第一个参数加上time=等于当前时间戳，再拼接token

原因1：因为iframe标签获取项目也是在发送请求，短时间平凡切换可能会参数一样（token没变）当浏览器发现这个请求一直在请求并且参数一样，可能会触发浏览器缓存机制，导致iframe标签不在加载，某个项目boday加载不出来导致白屏

原因2：一般项目在没有token，或者token过期时可能会带参数返回登录页，iframe也带参数，导致2个参数2个问号，导致第二个项目在登录页参数取不到。
如果第二个项目是别人的，免登录问题不用管，传递token让他们处理即可
如果2个项目都是自己-我们也可以解决

解决：在login页面接受第一个项目token，解析出用户账号密码直接前端走原来页面方法，但是注意要使用遮罩层，避免用户看到2个登录页面，察觉到是2个项目

总结：

经过这一趟流程下来相信你也对 vue 使用iframe标签切换不同项目，实现步骤（互相嵌套，高度不适应（底部出现白条-随着切换越来越大）传值取值（免登录），内容空白缓存问题）有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！