详解如何在登录过期后跳出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结构性伪类选择器九种写法
Apr 18 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 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的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP编写RESTful接口
2016/02/23 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python用字典统计单词或汉字词个数示例
2014/04/22 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python实现飞机大战项目
2020/03/11 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
python绘制趋势图的示例
2020/09/17 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
党章学习思想汇报
2014/01/14 职场文书
服装创业计划书范文
2014/02/05 职场文书
新文化运动的口号
2014/06/21 职场文书
党员个人总结自评
2015/02/14 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书