详解如何在登录过期后跳出Ifram框架


Posted in HTML / CSS onSeptember 10, 2020

1、文章背景

我们在做后台项目管理时,常用 Ifram 框架来加载页面,即:

<iframe src="url"></iframe>

我们使用 iframe 标签来加载页面,该 src 可以指向不同的页面,从而我们可以在一个网页中打开更多的页面,但是我们也需要尽可能地控制同事打开的网页数,避免客户端消耗太大导致网页崩溃。网页效果如下:

详解如何在登录过期后跳出Ifram框架

2、问题描述

那上一步,我们已经了解了 Ifram 框架,整体大概分为:菜单栏,导航栏,和主体 Ifram 内容,那么当我们登录信息过期的时候,系统会进行登录拦截,导致页面跳到登录界面,如下:

详解如何在登录过期后跳出Ifram框架

可以看出,当我们登录信息过期之后,ifram 加载了登录界面,当我们输入了登录信息之后,发现如下:

详解如何在登录过期后跳出Ifram框架

那么客户是不清楚发生了什么事的,一定会觉得这个系统是不是出问题了,这对用户体验是极差的

3、解决方案

以上,我们了解了 ifram 加载的页面,会导致登录信息过期时,加载了登录界面,影响用户体验,那么解决方法如下:

// 登录过期的时候,跳出ifram框架
if (top.location != self.location) {
    top.location = self.location
};

我们在登录界面的 JS 中,加上如上代码,表示当前窗体的 URL 与 父窗体的 URL 是否不相等,不相等则父窗体的 URL 等于当前窗体的 URL,这样就能成功跳出 Ifram 框架了

到此这篇关于详解如何在登录过期后跳出Ifram框架的文章就介绍到这了,更多相关登录过期后跳出Ifram 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 #HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 #HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 #HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 #HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 #HTML / CSS
h5封装下拉刷新
Aug 25 #HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 #HTML / CSS
You might like
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP分页显示制作详细讲解
2006/12/05 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python多维数组切片方法
2018/04/13 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
企业宣传策划方案
2014/05/29 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
python实现双向链表原理
2022/05/25 Python