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


相关文章
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2192 0
|
虚拟化 数据中心 Windows
Microsoft Exchange Server SE RTM - 本地部署的企业级电子邮件解决方案
Microsoft Exchange Server SE RTM - 本地部署的企业级电子邮件解决方案
186 0
Microsoft Exchange Server SE RTM - 本地部署的企业级电子邮件解决方案
|
12月前
|
SQL 数据挖掘 Python
R中单细胞RNA-seq数据分析教程 (1)
R中单细胞RNA-seq数据分析教程 (1)
R中单细胞RNA-seq数据分析教程 (1)
|
自然语言处理 JavaScript 前端开发
LayUI之动态选项卡Tab&iframe使用
LayUI之动态选项卡Tab&iframe使用
716 0
|
前端开发 关系型数据库 MySQL
Python基于Django框架图书管理系统,Bootstrap框架UI,后台EasyUI框架UI,有登录,实现增删改查的富文本效果
本文介绍了一个使用Python Django框架开发的图书管理系统,该系统采用Bootstrap框架进行前端UI设计,EasyUI框架用于后台UI界面,集成了富文本编辑器,并实现了登录及增删改查功能。
388 1
|
安全 Python
FastAPI安全性揭秘:如何用Python构建坚不可摧的Web应用?
【8月更文挑战第31天】在现代Web开发中,确保应用安全稳定至关重要。FastAPI作为高性能Python Web框架,提供了认证授权、数据验证、CSRF保护及HTTPS支持等安全机制。本文将深入探讨这些特性,并通过示例代码展示如何利用FastAPI构建安全可靠的Web应用。 FastAPI的安全性涵盖多个方面:通过认证授权机制验证用户身份并控制访问权限;利用数据验证功能防止恶意输入;启用CSRF保护避免跨站请求伪造攻击;支持HTTPS增强应用安全性。示例代码展示了如何使用JWT进行认证授权、如何通过`Body`验证请求数据、如何启用CSRF保护以及如何配置HTTPS支持。
574 0
|
SQL 监控 安全
数据库安全:SQL注入防御实践
【7月更文挑战第11天】SQL注入攻击作为一种常见的网络攻击手段,对数据库的安全性和业务稳定构成了严重威胁。为了有效防御SQL注入攻击,开发者和数据库管理员应采取一系列实践措施,包括输入验证与过滤、使用参数化查询、限制数据库用户权限、使用Web应用程序防火墙、定期更新和打补丁、实施实时监控和审计以及使用HTTPS协议等。通过这些措施的实施,可以显著提升数据库的安全性,降低遭受SQL注入攻击的风险。同时,开发者和数据库管理员应持续关注新的安全威胁和防御技术,不断提升自身的安全防护能力。
|
SQL 缓存 自然语言处理
SQL参数化查询为什么能够防止SQL注入
SQL参数化查询为什么能够防止SQL注入
364 0
|
JavaScript
Layui中jquery的使用方式
Layui中jquery的使用方式
447 0