专栏首页追逐时光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>

效果图,如下所示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ASP.NET Core 3.x Razor视图运行时刷新实时编译

      很长一段时间没有写过ASP.NET Core Razor(.cshtml)视图开发WEB页面了,今天刚好把之前做的一个由ASP.NET Core 2.2+R...

    追逐时光
  • 微信小程序开发之多图片上传+服务端接收

      业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存。

    追逐时光
  • Linux系统彻底卸载MySQL数据库

    输出结果表示,我安装的MySQL Server,Client都是5.6.44的,因为我系统支持的版本是要5.7+的版本,所以不得不卸载重装 

    追逐时光
  • 九大网页编程入门网站

    许多职业需要几年的时间来学习和训练, 而对于许多刚刚踏入网页开站发的人来说, 最令人高兴的事莫过于可以很轻松的入门。 ? 但你真的找到了适合自己的学习平台吗? ...

    企鹅号小编
  • 【JavaWeb】75:写一个登录案例

    关于数据库这一块暂时也告一段落了,其中后续会做一个思维导图的总结。想把数据库完全学清楚,几天的学习肯定是远远不够的。毕竟要知道数据库在大学可是一门课,要花一整学...

    刘小爱
  • HTML|前端网页的设计基础知识

    html指的是超文本标记语言,是用来描述网页的一种语言。且其并未为一种编程语言,而是一种标记语言(一套标记标签),以此为基础来描述网页。

    算法与编程之美
  • 为什么寄存器比内存快?

    计算机的存储层次(memory hierarchy)之中,寄存器(register)最快,内存其次,最慢的是硬盘。

    Linux阅码场
  • 为什么寄存器比内存快?

    计算机的存储层次(memory hierarchy)之中,寄存器(register)最快,内存其次,最慢的是硬盘。

    帅地
  • 同样是晶体管,为什么寄存器比内存快?

    计算机的存储层次(memory hierarchy)之中,寄存器(register)最快,内存其次,最慢的是硬盘。

    黄泽杰
  • 为什么寄存器比内存快?

    计算机的存储层次(memory hierarchy)之中,寄存器(register)最快,内存其次,最慢的是硬盘。 ? 同样都是晶体管存储设备,为什么寄存器比内...

    ruanyf

扫码关注云+社区

领取腾讯云代金券