CRM页面中使用tab切换和iframe加载模拟浏览器tab页

最新推荐文章于 2022-04-26 11:40:27 发布

黑芝麻饺子

最新推荐文章于 2022-04-26 11:40:27 发布

阅读量423

点赞数

分类专栏：工作文章标签： CRM记录

本文链接：https://blog.csdn.net/weixin_41108537/article/details/102033760

版权

本文探讨了在CRM系统中，如何利用tab切换和iframe模拟浏览器的多标签页效果，同时处理状态管理和权限问题。通过sessionStorage实现页面间通信，但面临权限与安全性挑战。作者尝试了不同的解决方案，包括借鉴redux思想和iframe的contentWindow，最终认识到前端守卫和单页面应用的重要性。

摘要由CSDN通过智能技术生成

1.背景
CRM为了兼容各种浏览器(主要还是ie10,emmm或者说项目组为了试用能兼容ie10的公司前端框架,所以用的是旧版本的底层框架),
2.问题
能在页面中模拟浏览器
3.实现
从实现来讲,就是tab页的切换,监听.tab.active就能实现的,
但是要iframe点击,也能在父页面跳出页面,模拟浏览器打开新的tab页
所以需要用到一个状态管理,但是比较头疼的是我的知识范围里,状态管理都是单页面应用的,多页面就是头痛.
最开始用sessionStorage作为状态管理来实现(只能存入文本,所以会先试用JSON转化tab数组,获取的时候再用JSON转成数组).
然后就是sessionStorage的问题了,大家知道的,sessionStroage只要F12,啥都看到了,然后CRM最重要的就是权限问题了,不然还要啥~~自行车~~账号密码,所以本质上是想要保护内部地址不被轻易获取的(每次进入页面也会有请求服务验证权限,但本质上前端也要进行守卫,虽然我觉得network一看啥都知道了,守卫地址其实iframe并不友好,所以我本来想要用ajax请求html,后来一想,emmm好像也没有差)
然后我就觉得就这样吧,反正怎么样,不用组件化,屁都没用
4.延伸
因为有涉及到多页面的状态管理,所以我就开始尝试了一番,感觉上还是很有趣的,但实际上还是聊胜于无(本质上参考了redux的思想和iframe的contentWindow传值)

<!DOCTYPE htm>
<!--index.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="show1"></div>
    <iframe src="./iframe.html" frameborder="0"></iframe>
    <script type="module" src="./index.js"></script>
</body>
</html>