前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面,实现单页面的效果

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

作者头像
追逐时光者
发布2020-06-19 11:47:21
3.9K0
发布2020-06-19 11:47:21
举报
文章被收录于专栏:编程进阶实战

前言:

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

代码实现:

请求的超链接如下所示:

https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首页 其中transferUrl:为需要打开的页面地址 openTabsName:为tabs标题名称

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

代码语言:javascript
复制
//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中的值 

代码语言:javascript
复制
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);
}

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

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

代码语言:javascript
复制
layui-nav-itemed的属性默认导航全部展开

<li class="layui-nav-item layui-nav-itemed">
</li>

效果图,如下所示:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-03-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言:
  • 代码实现:
    • 请求的超链接如下所示:
      • layui预先加载,获取超链接中传递过来的跳转页面地址和tabs title名称在iframe中打开:
        • Js获取超链接里面传递的参数值:
          • 关于存在多了一级菜单栏,而链接中所带的地址又不是第一个一级菜单栏中的子菜单栏我们该如何解决初次加载显示子级菜单栏问题?  
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档