首页 > 其他分享> 文章详细

嵌入iframe时如何同步menu菜单

2022-02-19 11:02:51 阅读：173 来源： 互联网

标签：菜单 console log menu vue iframe se 页面

在做项目时,发现公司的项目组成是 vue的菜单框架 + iframe 的页面嵌套

这样的好处是便于控制项目的授权,以及控制vue单页面项目的庞大性.

随之而来的问题是: 当内嵌的 iframe 页面跳转到另一个内嵌的 iframe 页面时,左侧的 menu 菜单没有改变,无法同步.

因为是所属不同的页面,vue 框架无法去接收到内嵌 iframe 改变的变化

是内嵌的 iframe ,也无法使用组件传值,vuex传值等.

很困扰!

正值公司做技术变革,统一前端域名.

诶,统一域名,我突然想到一个好用的方法!

web Storage 事件通知机制

即本地存储监听.

当同一域名的情况下,电脑上本地存储的数据是可以共享的,那么,即使是多个不同的页面,数据也是可以传送的.

只要在框架vue 页面上监听特定的本地存储信息,那么在其他页面时改变这特定的本地存储信息时,框架页面便会接收到改变信息的状态,即可更改菜单menu的选中状态.

为了第一时间触发监听,我们可以把监听事件写在框架的app.vue页面中,通过vuex的形式调用,如果其他地方需要使用的话也比较方便.
具体的代码不方便列出.
demo如下

框架页面 demo.html:

<!DOCTYPE html>
<html>
  <head>
    <title>监听本地存储demo,外部框架</title>
  </head>

  <body>

    <iframe src="./iframe.html" frameborder="0"  height="500px" width="800px"></iframe>


      window.addEventListener("storage", callback, false);

      function callback(se) {
        console.log("被修改的key：" + se.key);
        console.log("原值：" + se.oldValue);
        console.log("新值：" + se.newValue);
        console.log("url地址：" + se.url);

        if (se.key == "token") {
          console.log("token已被修改！");
        }
      }
    </script>
  </body>
</html>

内部嵌入iframe 页面 iframe.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部嵌入页面</title>
</head>
<body>
    <button onclick="store()">改变存储</button>

<script type="text/javascript">
    function store(){
        var str = prompt('请输入')
        localStorage.setItem('token',str)
    }
    </script>
</body>
</html>

注意:文件的路径自行修改!

效果:

标签：菜单,console,log,menu,vue,iframe,se,页面
来源： https://www.cnblogs.com/isdong/p/15912066.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

嵌入iframe时如何同步menu菜单

即本地存储监听.