详解如何在登录过期后跳出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弹性伸缩布局之box布局
Jul 12 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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实现采集中国天气网未来7天天气
2014/10/15 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
python中cPickle类使用方法详解
2018/08/27 Python
Django之模型层多表操作的实现
2019/01/08 Python
详解python编译器和解释器的区别
2019/06/24 Python
python输出决策树图形的例子
2019/08/09 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
2014信息公开实施方案
2014/02/22 职场文书
机械机修工岗位职责
2014/08/03 职场文书
检讨书范文
2015/01/27 职场文书
刘公岛导游词
2015/02/05 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
2015入党自传格式范文
2015/06/26 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书