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

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

1、文章背景

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

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

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

2、问题描述

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

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

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

3、解决方案

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

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

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

目录
相关文章
|
6月前
|
文字识别 算法 测试技术
自动化测试中几种常见验证码的处理方式及如何实现?
自动化测试中几种常见验证码的处理方式及如何实现?
75 1
|
13天前
|
安全 前端开发 Java
针对 SpringSecurity 鉴权流程做了一个详细分析,让你明白它是如何执行的!
针对 SpringSecurity 鉴权流程做了一个详细分析,让你明白它是如何执行的!
137 0
|
13天前
|
前端开发 JavaScript PHP
fastadmin框架自带的数据效验
fastadmin框架自带的数据效验
108 0
|
9月前
|
缓存 NoSQL 前端开发
若依系统(分离版)后台接口被调时,代码哪里判断了token是否超时?
若依系统(分离版)后台接口被调时,代码哪里判断了token是否超时?
523 0
|
10月前
|
存储 PHP
php开发实战分析(2):cookie的动态使用(设置、获取、删除、猜你喜欢原理、购物车调用)
php开发实战分析(2):cookie的动态使用(设置、获取、删除、猜你喜欢原理、购物车调用)
145 0
|
存储 JSON NoSQL
实战!退出登录时如何借助外力使JWT令牌失效?
实战!退出登录时如何借助外力使JWT令牌失效?
|
存储 前端开发 NoSQL
技术汇总:第十六章:关于登录与退出的token
技术汇总:第十六章:关于登录与退出的token
267 0
|
前端开发
前端项目实战34-登录失败控制
前端项目实战34-登录失败控制
70 0
|
前端开发
前端工作小结93-重置逻辑
前端工作小结93-重置逻辑
55 0
|
前端开发 测试技术
接口测试平台代码实现118:登陆态cookie持久化
我们在之前的章节中,成功搞定了登陆态的相关功能,但是我们之前设计的登陆态接口,其本质是提取返回值的特殊字段,然后插入到其他接口的url/header/body中。

热门文章

最新文章