vue+typescript+elementui浏览器兼容性4-iframe-localStorage失效

最新推荐文章于 2024-08-14 08:30:00 发布
最新推荐文章于 2024-08-14 08:30:00 发布
阅读量661 收藏 1
点赞数
分类专栏： # 前端问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wltsysterm/article/details/115724127
版权
本文探讨了在构建一个系统族中实现基于客户端的单点登录功能的问题。在多个业务系统间共享登录时，通过iframe通信实现单点登出功能在Chrome和Firefox上可行，但在IE11和Safari上遇到障碍，因为无法获取到localStorage信息。为了解决这个问题，提出了新的登出策略：首先跳转到单点登录系统完成登出，然后返回原业务系统页面，以确保在所有浏览器中实现单点登出功能。
摘要由CSDN通过智能技术生成

问题

项目包括一个系统族，多个系统之间共享登录，因此构建基于客户端的单点登录功能，实现方式：

  1. 一个单点登录系统负责存储单点登录的信息
  2. 多个业务系统
  3. 业务系统通过内嵌iframe的方式实现跟单点登录的通信从而实现单点登出功能

但是在实现过程发现，谷歌火狐都能通过iframe拿到单点登录系统域名下的localStorage信息，在ie11和safri上却不行

解决

经过设计，单点登出功能，没办法在不刷新页面的背景下实现，因此单点登出的时候，先跳转单点登录系统先退出单点登录的用户，然后再跳转回原先业务系统页面

 

独行侠_阿涛
关注
专栏目录
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 776
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
前端面试题
IT_Jiangxiaobai的博客
05-19 5115
01-HTML~02-CSS 1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？ 要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面 要点二 : 声明对大小写不敏感 2.常用浏览器有哪些，内核都是什么？ 答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefo
iframe-localstorage
06-09
iframe-localStorage 实际上不可能从嵌套在不同域中的 iframe 元素中的页面使用功能（考虑到父框架域）。 为了解决这个限制，我编写了这个简单的库，它使用功能也可以在跨域框架中使用 localStorage。 为了使用它，在父窗口中包含 parent.js 文件和在嵌套窗口中包含 iframe.js 文件就足够了。 iframe.js 文件覆盖 localtStorage setItem 、 getItem和removeItem方法，并提供延迟接口等待结果。 代码示例 在嵌套页面中包含 iframe.js 后，您可以将 localStorage 方法与经典接口一起使用。 localStorage . setItem ( 'test' , 5 ) ; localStorage . getItem ( 'test' ) . done ( function
vuex+localStorage vuex刷新失效？
MrFano的博客
04-12 2153
想必大家在使用vuex的时候,vuex刷新后数据失效的问题会困扰大家，本文教大家如何利用本地缓存保存状态 Install npm install vuex-along --save 1.import 导入 import vuexAlong from 'vuex-along'   2.add to store 添加至store的 plugins 的数组里 export default new V...
【vue】浏览器兼容相关
最新发布
weixin_47351913的博客
08-14 1408
Vue.js 3.x 更加关注现代浏览器，而 Vue.js 2.x 则提供了更广泛的浏览器支持。如果你的应用需要支持较旧的浏览器，可以选择 Vue.js 2.x 或者在 Vue.js 3.x 中使用适当的配置来实现兼容性。Vue.js 是一个流行的前端 JavaScript 框架，它支持构建单页应用和复杂的用户界面。如果你使用的是 Vue CLI 创建的项目，可以通过修改 babel.config.js 文件来配置 Babel 转译规则。使用 Babel 转译 ES6+ 代码。使用 polyfills。
hbuilder mui 在ios环境下 localstorage 子iframe获取不到localstorage值，或者退出APP后再打开APP值丢失。
HW1233456的专栏
12-27 2229
最近碰到了这种情况，说实话很苦恼，找了两三天，发现很简单的解决方式，就是把文件发布到服务端，访问服务端文件就好了。 可是是为什么呢？ 这要从我设置的子iframe的src值说起，地址大概是这样的：forder/test.html 这样就会引起ios不适，他会认为这个页面和他的父页面是跨域一样的存在。可是是为什么呢？ 应该是domain的关系，他会认为forder/test.html这个地址...
vue 前端 用iframe实现单点登录
小白成长记
06-29 6343
前端在实现单点登录过程中，最主要的 是按照系统的要求 保存好 可以证明系统登录过的证据。保存证据（下文统称其为token）的位置：1. localStorage，2. cookie对于存在不同域名的系统，我们可以借助iframe的src属性解决跨域问题，然后用iframe的dom元素的contentWindow的postMessage向iframe内嵌的网页传递数据，再在被内嵌的网页的代码中添加message事件截取消息，然后去保存token。具体代码见下方监管系统中点击跳转的回调函数：.........
iframe 页面中获取父级页面的 localStorage 或者 sessionStorage数据
jiangjunyuan168的博客
01-24 3950
在开发的过程中遇到需要在 iframe 页面中获取父级页面系统所存储的本地数据的需求。由于浏览器的安全策略，是不允许 iframe 页面直接获取系统的存储数据的，那么要如何解决呢？
2021前端面经-看这篇就够了（笔者靠这个拿到阿里和字节的offer）
爱前端也爱恋爱
04-30 1862
面试题梳理 梳理前端常见面试题及答案。 一、web 前端性能优化 性能评级工具（PageSpeed 或 YSlow） css CSS优化、提高性能的方法有哪些 多个css合并，尽量减少HTTP请求 将css文件放在页面最上面 移除空的css规则 避免使用CSS表达式 选择器优化嵌套，尽量避免层级过深 充分利用css继承属性，减少代码量 抽象提取公共样式，减少代码量 属性值为0时，不加单位 属性值为小
iframe 跨域之间共享localStorage,sessionStorage
m0_65730686的博客
09-02 9861
iframe 跨域之间共享localStorage,sessionStorage
cookie和localstorage在iframe中的应用
u010895423的博客
02-23 4210
cookie和localstorage在iframe中的应用
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
利用iframe技巧获取访问者qq实现思路及示例代码
09-28
怎么利用web页面获取访问者的qq？通过qq进入空间或是邮箱，一定会在咱们电脑的浏览器上留下cookie，在cookie上做下文章就可以了
跨域SESSION的问题
weixin_30551947的博客
03-02 280
跨域SESSION的问题: JAVA: 就是在servlet下的EncodingFilter.java文件中加入如下代码： HttpServletResponse res = (HttpServletResponse) sresponse; res.setHeader("P3P", "CP=CAO PSA OUR"); 反正就是上面的怪符号就可以搞定。在网上搜到的，累死人。 感谢以上兄弟...
解决跨域的方法
tumi
05-29 795
浏览器同源：协议，域名，端口都相同如果非同源，则有三种行为受到限制：1. Cookie、LocalStorage、IndexDB 无法读取2. DOM 无法获取3. AJAX 请求不能发送那么，如何规避这三种限制呢？针对Cookie:Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共...
使用JavaScript下进行iframe的DOM操作（考虑浏览器兼容性）
weixin_34090562的博客
06-24 96
今天碰到一个浏览器兼容性的问题，是IE和Firefox下iframe DOM操作的差异。本文借IE和Firefox在iframe DOM操作的不同，进行分析说明JavaScript在DOM操作中两者的不同。 IE和Firefox对iframe document对象的差异性 在IE6、IE7中，我们可以使用 document.frames[ID].document 来访问...
在Vue里面嵌套Iframe页面教程分享 解决切换页面后没有办法保留住内容的问题
csdndddsd的博客
11-17 3889
在vue的router-view同级别添加了一个iframeTemp组件，其实就是一个elementUI的tab组件，然后把tab组件的头的样式隐藏在菜单栏的下面。为了解决切换了vue的路由，然后再切回http的页面，iframe中的src属性的页面就会从新刷新，没有办法保留住内容的问题。之后的iframe组件的显示隐藏和tab切换，都是通用vuex和bus事件广播实现的。在这个功能的实现中我们用到了bus事件总线的广播和监听。还要添加一个没用的路由，因为我们的锚记还要发生变化。
踩坑vue中嵌套iframe项目，嵌套在iframe中的项目无法登录！
jieyucx的博客
04-26 3928
该属性一般是随着Set-Cookie响应头设置的，语法为response.setHeader(“Set-Cookie”,“CookieName=CookieValue;由于后续接口提示401，判断是登录接口鉴权失败导致的，原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！以iframe标签嵌入一个现有的项目到网站中，嵌入的项目无法正常登录，直接在浏览器地址栏输入url并登录是正常的。
chrome浏览器iframe无法获取cookie
duteipi的博客
08-21 9386
一个大坑，谷歌浏览器升级到80版本之后，iframe读不到cookie1.addFlashAttribute2.ajax3.layer弹出层4.url重写5.SameSite=None6.同一域下 　 　因为甲方的需求，需要实现一个免登陆的页面，没有权限管控，但是又不想让看见这个链接的真实地址，所以需要在隐藏链接地址的情况下进行模拟登陆。 　 　之前运行正常，直到最近开始频繁的报错，查找之后发现问题在chrome浏览器今年2月份将SameSite的默认值改为了LAX，所以iframe中无法正确获取cooki
使用vue+vue-router+elementUI构建简易通讯录教程
"本文主要介绍如何使用Vue.js、Vue Router和Element UI来构建一个简单的通讯录应用。通过这个教程，读者将学习到如何利用这些技术实现一个具备基本增删改查功能的通讯录，其中数据存储在本地的localStorage中。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独行侠_阿涛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值