使用iframe框架后的页面,执行跳转命令,目标页面内嵌至iframe的子页面的解决方法

使用iframe框架后的页面,执行跳转命令,目标页面内嵌至iframe的子页面的解决方法问题描述 nbsp nbsp nbsp nbsp 在做项目的过程中 需要完成修改密码后重新登录的功能 但是前端页面使用了 IFrame 的框架 修改页面内嵌在的 index html 中 重新登录的页面就内嵌到原来的页面中 问题如图所示 nbsp 修改密码成功后 nbsp 出现问题 修改密码页面跳转到的登录页面内置到了子页面中 nbsp 登录后出现了如下页面 nbsp 前端使用的是 AngularJs 后台使用的 sp

问题描述:

        在做项目的过程中,需要完成修改密码后重新登录的功能,但是前端页面使用了IFrame的框架,修改页面内嵌在的index.html中,

重新登录的页面就内嵌到原来的页面中。

问题如图所示:使用iframe框架后的页面,执行跳转命令,目标页面内嵌至iframe的子页面的解决方法

 

修改密码成功后:

使用iframe框架后的页面,执行跳转命令,目标页面内嵌至iframe的子页面的解决方法

 

出现问题,修改密码页面跳转到的登录页面内置到了子页面中

使用iframe框架后的页面,执行跳转命令,目标页面内嵌至iframe的子页面的解决方法

 登录后出现了如下页面:

使用iframe框架后的页面,执行跳转命令,目标页面内嵌至iframe的子页面的解决方法

 前端使用的是AngularJs,后台使用的springSecurity做的安全控制

原来代码:

password.html

 <a data-toggle="modal" class="btn btn-danger" ng-click="alterPassword(oldPassword,newPassword,password)">提交修改</a>

 

Service.js

//修改密码 this.alterPassword=function(oldPassword,newPassword){ return $http.get('../teacher/alterPassword.do?oldPassword='+oldPassword+'&newPassword='+newPassword); }

Controller.js

 //修改用户密码 $scope.alterPassword=function(oldPassword,newPassword,password){ if(newPassword!=password){ alert("两次密码输入的不一致!"); return; } teacherService.alterPassword(oldPassword,newPassword).success( function(response){ alert(response.message); //重新查询 location.href="../logout"; } ); }

 

修改后代码:

 //修改用户密码 $scope.alterPassword=function(oldPassword,newPassword,password){ if(newPassword!=password){ alert("两次密码输入的不一致!"); return; } teacherService.alterPassword(oldPassword,newPassword).success( function(response){ alert(response.message); //重新查询 /*location.href="../logout";*/ windows.parent.location.href="../logout"; } ); }

修改后,index.html的(主页面)直接跳转至的login.html页面

问题完美解决。

 

解决方法有两个:
(1)在<a> </a>标签中跳转,设置标签的目标属性为_parent;

<a target="_parent" href="../logout">安全退出</a>

(2)在js中使用window.location.href跳转,让父页面跟着一起跳转,即在window.location.href = url改为window.parent.location.href = url;(window可省略)

我根据项目采用的是第二种

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/233023.html原文链接:https://javaforall.net

(0)
上一篇 2025年8月23日 下午4:01
下一篇 2025年8月23日 下午4:22


相关推荐

  • Java Session获取/销毁

    Java Session获取/销毁Session会话机制,它是保存在服务器里面的,就是当我们进入一个浏览器,浏览器会自动给我们创建一个session保存用户的信息,当关闭浏览器的时候,session就销毁了,Session在web项目中是经常用到的。下面是session的用法。Session在web项目中的登录是基本都用上的,那么就以账号登录为例:代码只是展示了最里面判断登录成功并保存数据到session的//获取ses…

    2022年7月12日
    31
  • android 测试用例模板下载,app测试用例模板.doc

    android 测试用例模板下载,app测试用例模板.docapp测试用例模板APP基本测试用例个人首页1.我的页面2.个人信息页面3.个性标签页面4.TA的页面消息页面消息页面发布商品和图片发布商品分享图片买买买页面买买买页面一级分类页面买手热荐品类二级分类页面侧边栏页面购物车页面我的钱包页面一、编号条件步骤预期结果实际结果1打开我的页面?出现我的信息(头像、昵称、签名、关注数、粉丝数、入手、出手)、中部出现切换我发表的与我喜欢的tab、下部列表出现内容…

    2022年7月17日
    13
  • mysql 乱码 latin1_mysql 数据库 latin1 导致的乱码

    mysql 乱码 latin1_mysql 数据库 latin1 导致的乱码很多年以前遇到 mysql 的乱码问题 最近又遇到了 mysql 这货 默认的编码是 latin1 例如 latin1 swedish ci 实在不明白为什么是这样 而最近 10 年 主流的编码方式已经是 utf8 mysql 中 最初采用 utf8 generalci 与其匹配 后来逐渐地使用 utf8unicode ci 与其匹配 比较神奇的是 有时候 mysql 数据库已经从 lati

    2026年1月16日
    2
  • Unsafe类详解

    Unsafe类详解Java 不能直接访问操作系统底层 而是通过本地方法来访问 Unsafe 类提供了硬件级别的原子操作 Unsafe 类在 sun misc 包下 不属于 Java 标准 很多 Java 的基础类库 包括一些被广泛使用的高性能开发库都是基于 Unsafe 类开发 比如 Netty Hadoop Kafka 等 Unsafe 是用于在实质上扩展 Java 语言表达能力 便于在更高层 Java 层 代码里实现原本要在更低层 C 层 实现的核心库功能用的 这些功能包括裸内存的申请 释放 访问 低层硬件的

    2026年3月17日
    2
  • ubuntu系统安装Anaconda与使用入门

    ubuntu系统安装Anaconda与使用入门

    2021年4月9日
    168
  • git第一次拉取远程代码_第一次从gitlab拉项目到本地

    git第一次拉取远程代码_第一次从gitlab拉项目到本地命令1、查看远程所有分支gitbranch-r#查看远程所有分支PSC:\Users\Lenovo\Desktop\tt\dc-biztable>gitbranch-rorigin/Developorigin/masterorigin/dev2、拉取远程分支到本地gitfetchorigin远程分支名:本地分支名这个远程分支名和本地分支名可以不一样,不过一般都会取一样的名字这样不容易混淆#拉取远程Develop分支到本地Develop

    2025年7月25日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号