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

前言

• 最近在开发中，由于是合作开发。双方已经有自己的前后端代码，最终需要整合代码上线测试

• 由于模块功能不同，双方ui并没有提前统一设计风格，并且已经开发完毕。

• 前后端如果直接合并到对方项目（前端-有各种冲突-后端鉴权-业务场景不一样）导致.......

• 后来最好的解决办法就是，通过iframe标签带参数来回切换对方项目

实现步骤

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

• 前端工程已经分离社会端，监管端（支队-总队-服务端），登录方式不一（鉴权方式不一）

• 整体布局风格不统一，代码规范不统一，公共组件不统一，合并之后需要大量时间修改调整细节

• 命名冲突，合并代码之后可能应为组件名，路由名，文件资源名，类名重名，导致代码报错需要修改多处

• 前端用户体系框架业务代码已经完善，合并之后冲突。导致业务逻辑代码需要大量时间重构调试

• 前端工程分开独立部署，可以通过代码层面区分社会端，监管端（支队-总队-服务端）。合并之后无法区分

• 前端全局处理机制不一样，合并之后冲突。导致统一处理失效。（全局状态码-统一错误处理，机制处理）

• 前端第三方库版本不一，合并之后。可能因为部分库版本对不上导致部分api，功能失效，出现兼容性问题

2.代码实现

// HTML代码

      
    
    
// 传递地址访问别人项目-别人项目接受参数免登录-浏览器缓存问题
// 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标签切换不同项目，实现步骤（互相嵌套，高度不适应（底部出现白条-随着切换越来越大）传值取值（免登录），内容空白缓存问题） 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

有什么不足的地方请大家指出谢谢 -- 風过无痕