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>
效果图,如下所示:
作者名称:追逐时光者
作者简介:一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。如果该篇文章对您有帮助的话,可以点一下右下角的【♥推荐♥】,希望能够持续的为大家带来好的技术文章,文中可能存在描述不正确的地方,欢迎指正或补充,不胜感激。