前言:

  使用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内打开一个新的页面,实现单页面的效果的更多相关文章

  1. Window.open 实现导航与打开窗口,导航到一个特定链接地址,也可以打开一个新的浏览器窗体

    语法 window.open(strUrl,strWindowName,strWindowFeatures ,replace) strUrl: 打开资源的地址 strWindowName: 表示窗体名 ...

  2. selenium获取新页面标签页(只弹出一个新页面的切换)

    selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...

  3. layer.open打开一个新的jsp页面,如何关闭并刷新父页面问题

    layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新父页面列表. layer.closeAll(); parent.layer.closeAll(); wi ...

  4. JS事件 加载事件(onload)注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。 2. 此节的加载页面,可理解为打开一个新页面时。

    加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...

  5. html一个页面链接携带参数跳转另一个页面基于vue2.0的element框架

    来给生活比个耶! 1.按钮 <el-button @click="albumList(scope.row.id)" size="mini" type=&q ...

  6. 使用JavaScript根据从后台获取来的数据打开一个新的页面

    HTML代码是: 入库类型是: <select id="selectIn" onchange="goUrl(this.options[this.selectedIn ...

  7. jsp重新打开一个新的页面

    有以下一种实现方式: 1.target="_blank” <a href="document.html" target="_blank"> ...

  8. 页面嵌入QQ功能(点QQ建立一个临时会话,显示在页面的固定位置)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. window.open打开一个新空白页面,不会自动刷新【解决方案】

    调用js方法: function BuildPostForm(fm, url, target) { var e = null, el = []; if (!fm || !url) return e; ...

随机推荐

  1. Autowired和Resource区别

    @Autowired和@Resource熟悉吧?是不是经常复制粘贴顺手就来,两者都是用来给成员变量自动装载,可是它俩到底有啥区别呢? 1.@Autowired与@Resource都可以用来装配bean ...

  2. Leetcode 943. Find the Shortest Superstring(DP)

    题目来源:https://leetcode.com/problems/find-the-shortest-superstring/description/ 标记难度:Hard 提交次数:3/4 代码效 ...

  3. 一篇文章带您读懂List集合(源码分析)

    今天要分享的Java集合是List,主要是针对它的常见实现类ArrayList进行讲解 内容目录 什么是List核心方法源码剖析1.文档注释2.构造方法3.add()3.remove()如何提升Arr ...

  4. 爬虫(一)爬取鱼c淘贴信息

    掏出了以前的小练习: 现在开始,每天复习下以前的爬虫练习,争取发现新的问题和可以优化的地方. # -*- coding:utf-8 -*- import requests import chardet ...

  5. pika使用报错queue_declare() missing 1 required positional argument: 'queue'

    报错如下截图,使用pika的版本太高导致,重新安装pika==0.10.0解决.

  6. VirtualBox Ubuntu设置静态ip亲测可行

    virtualbox重启后ip会自动分配,不固定.项目中需要配置ip地址,因此每次ip换了,需要重新配置和编译. 网上搜罗好几种方法进行配置,尝试下面这种简单并且可行: 步骤一:查看虚拟机网卡 ifc ...

  7. go语言指南之斐波纳契闭包

    练习:斐波纳契闭包 让我们用函数做些好玩的事情. 实现一个 fibonacci 函数,它返回一个函数(闭包),该闭包返回一个斐波纳契数列 `(0, 1, 1, 2, 3, 5, ...)`. 这是一个 ...

  8. Mybatis笔记01-基本原理,配置文件,映射文件,以及调用过程

    Mybatis基本原理 应用程序找Mybatis要数据 mybatis从数据库中找来数据 2.1 通过mybatis-config.xml 定位哪个数据库 2.2 通过Category.xml执行对应 ...

  9. echart 之实现温度计

    百度这个图表支持不是很好,有的需要自己写,看大神们实现温度计都是用 水球特效实现的我这里雕虫小计啊但是满足我了我的项目需求特此分享出来,可惜自己不是专业的前端 这是我的实现结果 好了上代码html: ...

  10. css 进度条的文字根据进度渐变

    需求 1.进度条里面的文字需要根据进度的长度而变化 原理 用两个一模一样的样式的 div 重叠起来 效果 字体开始为 蓝色,跟随进度条变为 白色 在线预览: https://jsfiddle.net/ ...