解决iframe作为子窗口,刷新后页面跳转回默认首页的问题

这个问题真的是让我难受,从写php到thinkphp我用过了好几个后台框架。最后还是决定用花了几百大洋的H+。每个人都有自己的偏好,习惯用layui,vue的可能不太喜欢这个。我这人是心血来潮想用那个就把那个搬出来用,想用layui了就把它套进去,想用vue就把它也按进去。这个框架我个人比较喜欢,但是也有它的问题,就是

	iframe作为子窗口,刷新后页面跳转回默认首页

这个问题在我之前几个项目上就发现这个问题,并且tp5跳转后还是有点小问题,每个页面在框架内就是单独的页面,想起大学老师说的“画中画”。这个也不是说没好处,不管你在里面写了什么,地址栏都不会变,就算别人复制了你的url打开还是起始页。

但是项目需求不是这个样的,就得改,然后就在网上一堆查。说了很多,我js功底浅,有些方法还是没看懂,就按照说的来挨着试,总算找到一个能满足我需求的方法,分享给大家。

    function loadIframe(url) {
            //获取url链接
            var u = window.location.href;
            //因为每次获取的链接中都有之前的旧锚点,
            //所以需要把#之后的旧锚点去掉再来加新的锚点(即传入的url参数)
            var end = u.indexOf("#");
            var rurl = u.substring(0,end);
            //设置新的锚点
            window.location.href = rurl + "#" + url;
        }
        
        var hash = location.hash;
        var url = hash.substring(1,hash.length);
        $("#iframe").attr("src", url); //别忘了加id

直接把这个粘贴进去,然后在你左侧栏里面,把href=“creatCata.html”换成onclick="loadIframe('creatCata.html')",好了,这样地址栏就变了http://127.0.0.5/admin/index/index.html#creatCata.html,刷新也不会变,点击都正常了。

如果对这个不满意的可以去下载X-admin,里面也是用的js方法
在这里插入图片描述
在这里插入图片描述
每次点击原来的url不变,刷新也不变,还能保持原来的东西,但是好像每次刷新都是最后一个打开的页面。

### layui 父元素使用方法 #### 访问父页面的方法 在 `layui` 中,可以通过特定的方式访问父页面中的函数或变量。例如,在 iframe 页面中可以调用父页面定义的方法: ```javascript var parentMethodValue = parent.getMethodValue(); // 调用父页面的方法并获取其返值[^1] ``` 这段代码展示了如何从页面通过 JavaScript 的 `parent` 对象来访问父页面内的自定义方法。 #### 获取父节点的不同方式 对于 DOM 操作而言,如果想要获得某个元素的父节点,则有多种 jQuery 方法可供选择,如 `parent()`、`parents()` 和 `closest()` 函数。其中, - `parent([selector])`: 只能获取直接上级的一个父级元素; - `parents(selector)`: 返祖先元素组成的集合,不局限于一层; - `closest(selectors[, context])`: 从当前元素本身开始匹配寻找最近符合条件的那个先辈元素,并且一旦找到就立即停止搜索[^4]。 具体应用取决于实际需求场景下的层次关系以及是否需要精确控制选取范围。 #### 刷新页面表格数据 当涉及到更新父窗口的内容时,比如重新加载表格的数据到指定页码位置上,可采用如下策略: ```javascript // 定义操作对象 var active = { reload: function(){ var curPageNum = $(".layui-laypage-em").next().html(); // 获取当前显示的页码 // 如果页码为空则默认设置为首页 curPageNum = parseInt(curPageNum, 10); if (isNaN(curPageNum)) { curPageNum = 1; } // 执行重载动作 table.reload('dataTableId', { page: { curr: curPageNum // 设置要跳转的具体页数 }, where: {} // 这里可以根据实际情况添加查询条件参数 }); } }; ``` 上述脚本实现了点击按钮或其他触发事件后自动刷新页面上的表格视图至原有浏览位置的功能[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值