工作中遇到的技术问题备忘(四): 两个 iFrame 标签包裹 Vue 项目互相传值

1. 场景描述:

   两个 <iframe> 里包着同一个 Vue 项目的两个页面,在一个页面点击了,传递参数过去到另一个页面

   跳转方式: 通过 DOM 取到左边目录所有目录项的路径属性,检测到符合另一个页面的路径就属性手动 click 该目录项一下, 切换到另一个 <iframe >

2. 初步实现:

   通过 sessionStorage + 每次切换标签到这两个 Vue 页面就刷新该页面(启动生命周期钩子,检查 sessionStorage 是否有传值),初步实现了数据传递

3. 后续思路:

   有天在群里有人提到了类似的问题,大佬们就提出了一些思路:

   1. hash + onhashChange
   2. contentDocument
   3. window.postMessage
   4. sessionStorage

4. 最后实现:

   本来这个很令人捉急的项目结构只是项目重构完成前给用户凑合着用的,而且几乎没人用到这个模块,但是领导坚持要让他手下另一个公司当用户使用这部分功能,然后他们反映这样每次一切换这两个就刷新,体验很差,于是重改

   1. 使用 postMessage , 失败,不会玩

   2. 使用 onhashChange + sessionStorage

      // 具体的做法各有不同,但是思想基本上就是在该页面第一次加载的时候 mounted 钩子中加上 onhashchange 函数
      window.onhashchange = (val, oldVal) => {
        if (top.window.sessionStorage.getItem('另一个页面存入的数据属性名')) {
            if (this.view === '想要显示的页面组件') {
                this.view = undefined;
                this.$nextTick(() => {
                    this.view = '想要显示的页面组件'; // 刷新
                });
            } else {
                this.view = '想要显示的页面组件';
            }
        }
      }