详解如何在登录过期后跳出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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 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 分页原理详解
2009/08/21 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP学习笔记之session
2018/05/06 PHP
php微信开发之图片回复功能
2018/06/14 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Python isinstance函数介绍
2015/04/14 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
详解python3中zipfile模块用法
2018/06/18 Python
python实现多进程代码示例
2018/10/31 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
简历上的自我评价
2014/02/03 职场文书
趣味体育活动方案
2014/02/08 职场文书
车辆转让协议书
2014/09/24 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
个园导游词
2015/02/04 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
DQL数据查询语句使用示例
2022/12/24 MySQL