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

效果图,如下所示:

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.cnblogs.com/Can-daydayup/复制
如有侵权,请联系 yunjia_community@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 点击菜单选项,右侧主体区新增子界面(Tab)的实现

    今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面。一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区。有一种效果是这样...

    CherishTheYouth
  • Spring Boot 集成LayUI及组件

    LayUI是一个使用简单、上手容易的前端 UI 框架,非常适合后端开发人员构建后台管理系统使用。这个框架与SpringBoot类似,模块化各个组件,拿来即用。相...

    HLee
  • layer后台管理系统前端框架模板

    后台管理系统,是内容管理系统Content Manage System(简称CMS)的一个子集。CMS是Content Management System的缩写...

    Javanx
  • 页面弹出层组件layer的用法

    layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({ty...

    爱明依
  • springboot jpa搭建开发环境(二)

    在上一次搭建后台服务的基础上,本次主要是引入了一套前端框架,当然在进行界面与接口调试的过程中,发现jpa的使用还是有一些不是很明了的地方,有些地方已经解决,而有...

    sucl
  • 那些年前端跨过的域

    同源策略(same-origin policy) 最初是由 Netspace 公司在 1995 年引入浏览器的一种安全策略,现在所有的浏览器都遵守同源策略,它是...

    沃趣科技
  • layui打开iframe窗口不刷新的问题

    这个问题可能是我工作以来,最死磕不算bug的一个了,晚上熬夜到三点钟,终于找到了解决的办法。

    王小婷
  • iframe实现页面局部刷新原理解析

    web开发实现页面的局部刷新的技术,除了比较常见的ajax,还有通过iframe来实现,这种方式和ajax有什么不同呢?

    挥刀北上
  • Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页

    在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。

    朝雨忆轻尘
  • 什么是跨域?解决方案有哪些?

    同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同...

    用户1093975
  • JS跨域请求解决方案

    同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同...

    剑行者
  • Layui常用功能整理

    向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的...

    大忽悠爱学习
  • 跨域请求方案 终极版

    现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。

    互扯程序
  • 另类SEO分享:利用JS封装iframe躲过搜索引擎的抓取

    前言:很多博友不仔细看完内容就直接认为用 iframe 不好之类的云云,而实际上本文就是教你在必须使用 iframe 的时候,该如何躲过搜索引擎的抓取,避免不利...

    张戈
  • web常见安全问题

    Xss(cross site scripting)跨站脚本攻击,为了和css区分,所以缩写是xss。

    hss
  • 九种实用的前端跨域处理方案(转载非原创)

    转载来源:https://www.cnblogs.com/ypSharing/p/corsHanlder.html

    xlj
  • 跨域分析以及通解

    现今绝大多数新上线的网站都是基于前后端分离的部署模式来对外提供服务,而这种模式在不熟悉的情况下就很容易遇到一个恶心的问题——跨域

    Yerik
  • 基于iframe的跨域与更新父窗体地址栏的解决方案

    管理平台前端页面需要在当前前端框架结构基础上,在顶级导航中增加两个模块:首页、运维管理模块,以此接入运维平台提供的页面。在访问到内部某个页面后,希望父窗体的地...

    前端林子

扫码关注云+社区

领取腾讯云代金券