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

最新推荐文章于 2023-08-18 10:28:51 发布

哀愁

最新推荐文章于 2023-08-18 10:28:51 发布

阅读量1.1k

点赞数 1

分类专栏： layui

原文链接：https://blog.csdn.net/m0_37768843/article/details/83342530

版权

layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

追梦的蚂蚁。https://blog.csdn.net/m0_37768843/article/details/83342530

问题描述：
在做项目的过程中，需要完成修改密码后重新登录的功能，但是前端页面使用了IFrame的框架，修改页面内嵌在的index.html中
重新登录的页面就内嵌到原来的页面中
在这里插入图片描述

前端用的是layui 后台使用的shiro做的安全控制
password.jsp

<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>
<div>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">原始密码：</label>
                <div class="layui-input-inline">
                    <input lay-verify="required" lay-reqText="原始密码不能为空" type="text" name="password" autocomplete="off" class="layui-input">
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">修改密码：</label>
                <div class="layui-input-inline">
                    <input lay-verify="required" lay-reqText="修改的密码不能为空" type="text" name="updatePassword" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script type="text/javascript">
    layui.use(['jquery','form','layer'],function () {
        var $=layui.jquery;
        var form=layui.form;
        var layer=layui.layer;
        form.on('submit(demo1)',function (data) {
            var password=data.field.password;
            var updatePassword=data.field.updatePassword;
            $.post("/password/update",{password:password,updatePassword:updatePassword},function (str) {
                if (str.code==0){
                    layer.confirm("修改成功,请重新登录",function (index) {
                        window.parent.location.href="/user/logout"
                    });
                 } else{
                    layer.msg(str.msg);
                }
            });
            return false;
        });


    });
</script>

原本的js代码块是这样的

   layer.confirm("修改成功,请重新登录",function (index) {
                        location.href="/user/logout"
                    });

修改后的js 代码块是这样的：

layer.confirm("修改成功,请重新登录",function (index) {
                       window.parent.location.href="/user/logout"
                    });

passwordController:控制器

  @RequestMapping("/update")
    @ResponseBody
    public Map<String,Object>  update(String password,String updatePassword){
        Map<String,Object> map=new HashMap<String, Object>(16);
        Subject subject = SecurityUtils.getSubject();
        Session session = subject.getSession();
        TUser login_user = (TUser) session.getAttribute("login_user");
        String username = login_user.getUsername();
        String salt = login_user.getSalt();
        //数据库中的密码加盐值加迭代的次数
        String pwd = new Md5Hash(password, salt, 1024).toString();
        //通过用户名进行查询到数据中的密码
        //从页面获取到的密码进行加密之后（pwd）和数据中的密码进行比较
        TUser byUserName = userDao.getByUserName(username);
        String password1 = byUserName.getPassword();
        if (pwd.equals(password1)){
            Map<String,Object> map1=new HashMap<String, Object>(10);
            String salts = UUID.randomUUID().toString();
            String updatePassword1 = new Md5Hash(updatePassword,salts, 1024).toString();
            map1.put("pwd",pwd);
            map1.put("salt",salts);
            map1.put("password",updatePassword1);
            userDao.updatePassword(map1);
            map.put("code",0);

        }else{
            map.put("code",1);
            map.put("msg","原始密码错误");
        }

        return map;
    }

解决办法有两个：
1.在<a> </a>标签中跳转，设置标签的目标属性为_parent;

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

2.2）在js中使用window.location.href跳转，让父页面跟着一起跳转，即在window.location.href = url改为window.parent.location.href = url;（window可省略）
我根据项目采用的是第二种

哀愁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用iframe框架后的页面，执行跳转命令，目标页面内嵌至iframe的子页面的解决方法

追梦的蚂蚁。https://blog.csdn.net/m0_37768843/article/details/83342530问题描述：在做项目的过程中，需要完成修改密码后重新登录的功能，但是前端页面使用了IFrame的框架，修改页面内嵌在的index.html中重新登录的页面就内嵌到原来的页面中前端用的是layui 后台使用的shiro做的安全控制password.jsp<%@ page isELIgnored="false" %><%@ page content.
复制链接

扫一扫