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>
效果图,如下所示:

Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面,实现单页面的效果的更多相关文章
- Window.open 实现导航与打开窗口,导航到一个特定链接地址,也可以打开一个新的浏览器窗体
语法 window.open(strUrl,strWindowName,strWindowFeatures ,replace) strUrl: 打开资源的地址 strWindowName: 表示窗体名 ...
- selenium获取新页面标签页(只弹出一个新页面的切换)
selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...
- layer.open打开一个新的jsp页面,如何关闭并刷新父页面问题
layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新父页面列表. layer.closeAll(); parent.layer.closeAll(); wi ...
- JS事件 加载事件(onload)注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。 2. 此节的加载页面,可理解为打开一个新页面时。
加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...
- html一个页面链接携带参数跳转另一个页面基于vue2.0的element框架
来给生活比个耶! 1.按钮 <el-button @click="albumList(scope.row.id)" size="mini" type=&q ...
- 使用JavaScript根据从后台获取来的数据打开一个新的页面
HTML代码是: 入库类型是: <select id="selectIn" onchange="goUrl(this.options[this.selectedIn ...
- jsp重新打开一个新的页面
有以下一种实现方式: 1.target="_blank” <a href="document.html" target="_blank"> ...
- 页面嵌入QQ功能(点QQ建立一个临时会话,显示在页面的固定位置)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- window.open打开一个新空白页面,不会自动刷新【解决方案】
调用js方法: function BuildPostForm(fm, url, target) { var e = null, el = []; if (!fm || !url) return e; ...
随机推荐
- ubuntu 代理设置
在学习工作中使用vagrant作为开发环境已经有很长一段时间了,使用ubuntu 作为开发系统 在使用中发现,即使修改了apt的source.list源文件,在面对一些开发中需要的软件工具的时候,不可 ...
- usb设备枚举过程
USB主机在检测到USB设备插入后,就要对设备进行枚举了.为什么要枚举呢?枚举就是从设备读取一些信息,知道设备是什么样的设备,如何进行通信,这样主机就可以根据这些信息来加载合适的驱动程序.调试USB设 ...
- PS4游戏将登陆PC:一曲属于主机的悲歌
曾经,红白机.PS游戏机等成为一代人难以磨灭的记忆.而随后的索尼PS3.微软Xbox 360.任天堂Wii U等,也称霸了次时代主机时代,成为家庭娱乐的中心.但面对着依托于PC和智能移动终端 ...
- MYSQL对数据库和表的基本操作
CREATE DATABASE testdb CHARSET=UTF8 创建一个数据库 名字叫做testdb USE testdb; 选择数据库 CREATE TABLE testTable1( ) ...
- 【Mood】在COVID-19疫情中
看完网课(这还得从一只蝙蝠说起...),本来准备刷几道题. 还是来记录下这次事件吧. 2月1号,病毒感染人数破万. 接下来4天(今日6号)疫情走向爆发期. 每日平均新增发病人数达到了3000~4000 ...
- CentOS 7 国内源配置
CentOS 7 国内源配置 1. 备份自带源 # 首先要确认你有 wget 命令, 并且连着网 # cd /etc/yum.repos.d/ # mkdir repo # mv *.repo rep ...
- 一文了解各大图数据库查询语言(Gremlin vs Cypher vs nGQL)| 操作入门篇
文章的开头我们先来看下什么是图数据库,根据维基百科的定义:图数据库是使用图结构进行语义查询的数据库,它使用节点.边和属性来表示和存储数据. 虽然和关系型数据库存储的结构不同(关系型数据库为表结构,图数 ...
- python2.7.6安装easy_install (windows 64 环境)
1.复制以下代码保存到easy_install.py文件中(文件名可随意命名)并将该文件放到python的安装路径中(如:D:\Python27) #!/usr/bin/env python &quo ...
- 前端每日实战:147# 视频演示如何用纯 CSS 创作透视按钮的悬停特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qJEdKb 可交互视频 此视频是可 ...
- HTML5历史管理状态机制
前言:想要不刷新页面同时改变url 可以用HTML5 window对象的 hashChange 事件.同时介绍两个相关的api 和 1个事件. 两个API:1.history.pushState({n ...