Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面,实现单页面的效果
2020-03-30 22:21
1516 查看
前言:
使用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>
效果图,如下所示:
相关文章推荐
- 设置iframe 载入页面的效果跟直接打开这个页面一样
- 微信内点击链接或扫描二维码,通过ccjump实现直接打开手机默认浏览器打开指定网页
- 后台管理系统问题:点击a链接,打开二级页面的同时,iframe页面中的a链接新建了一个页面
- GreyFrame是一个遮罩弹出显示页面的JS类, 它可以允许你像在框架(如: frame和iframe)中打开一个链接.
- 【Filter 不登陆无法访问】web项目中写一个过滤器实现用户不登陆,直接给链接,无法进入页面的功能
- 详谈gdtool如何通过代码实现微信h5页面跳转浏览器 在微信中点击链接直接跳转到手机默认浏览器
- 通过NSURL实现网站链接打开效果的UIButton
- 用框架的一个右面页面去刷新框架的左面页面,实现像outlook打开信件后信件数减一的效果
- php -- PHP实现点击a标签的href做链接时,直接保存文件(任何类型),而不是通过浏览器直接打开下载的文件
- 同一页面中实现点击其中一个iframe中的链接后,将链接内容显示到另一iframe
- 通过URL获取html代码实现页面嵌入(代替iframe效果)
- 用框架的一个右面页面去刷新框架的左面页面,实现像outlook打开信件后信件数减一的效果
- PHP实现点击a标签的href做链接时,直接保存文件(任何类型),而不是通过浏览器直接打开下载的文件
- JavaScript 实现点击链接,多个页面内容同时改变的效果
- 同时刷新两个iframe指向的页面,一个链接关联两个iframe的刷新
- 通过网页链接打开应用程序客户端的两种实现方式
- Opera中实现拖拽一个链接在后台新标签页打开
- php动态网页实现页面静态化 通过在初次被访问时生成html文件保存起来,下次该PHP程序被访问时就直接找到以前被访问过的html页面
- Multiple-View ViewPager-如何实现Viewpager控件的一个页面展示多个page以及回弹效果
- 通过WEB链接打开QQ窗体,实现与陌生人交谈的目的