Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面,实现单页面的效果

简介: Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面,实现单页面的效果

前言:

  使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解。今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tabs的title名称参数,在layui-admin-iframe中自动打开一个新的tabs页面,不需要点击左边的菜单栏,实现一个单页面的效果。

代码实现:

请求的超链接如下所示:

https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首页

其中transferUrl:为需要打开的页面地址

openTabsName:为tabs标题名称

layui预先加载,获取超链接中传递过来的跳转页面地址和tabs title名称在iframe中打开:

//layui预先加载
layui.use('index', function(){
var transferUrl =getQueryVariable("tabName");
var openTabsName =getQueryVariable("name");
 //初始化页面调转
 layui.index.openTabsPage(transferUrl,openTabsName);
})

Js获取超链接里面传递的参数值:

如获取超链接[https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首页] 中的transferUrl和openTabsName中的值 

function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
console.log(decodeURIComponent(query));//js解码(超链接中的中文获取时可能存在编码的情况)
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return decodeURIComponent(pair[1]);}
}
return(false);
}

关于存在多了一级菜单栏,而链接中所带的地址又不是第一个一级菜单栏中的子菜单栏我们该如何解决初次加载显示子级菜单栏问题?  

我们可以在导航栏中设置左侧菜单导航栏默认展开的属性,如下所示:

layui-nav-itemed的属性默认导航全部展开
<li class="layui-nav-item layui-nav-itemed">
</li>

效果图,如下所示:

1336199-20200330222106506-998509662.png


相关文章
|
6月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
553 0
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
82 0
|
JavaScript
js点击button,在页面上创建一个三行四列的表格
js点击button,在页面上创建一个三行四列的表格
203 0
|
缓存
layui打开iframe窗口不刷新的问题
layui打开iframe窗口不刷新的问题
121 0
|
JavaScript 前端开发
【JavaScript】给一个div块添加链接,实现点击跳转页面
【JavaScript】给一个div块添加链接,实现点击跳转页面
|
JavaScript 前端开发
有关HTMl中a标签跳转到顶部的解决办法
有关HTMl中a标签跳转到顶部的解决办法
221 0
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
212 0
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
|
JavaScript 前端开发
easyui 后台页面,在Tab中的链接点击后添加一个新TAB的解决方法
1.示例1 新增一个按钮 添加点击事件 onclick="self.parent.addTab('百度','http://www.baidu.com','icon-add')" 如: 打开新TAB 这样点击链接后会增加一个新的TAB     2.
1464 0