layui如何在ifram跳转到一个新的tab页

最新推荐文章于 2024-06-12 14:44:36 发布
最新推荐文章于 2024-06-12 14:44:36 发布
阅读量7.7k 收藏 8
点赞数 2
分类专栏： layui 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33684444/article/details/103170893
版权

1、在当前ifram跳转到新页面

直接在ifram内使用 location.href = '新地址'

2、给父级添加一个ifram tab页

先给父级tab栏添加一个tab页（设置tabId：作为区别不同tab页的标识，页面地址，标题：在父级tab栏显示的文字）

window.parent.layuimini.addTab(tabId,url,title);

然后跳到刚刚添加的tab页

window.parent.layuimini.changeTab(tabId);

3、给页面上的dom元素添加点击事件（点击时跳转界面）

给dom元素添加 data-iframe-tab="页面地址" 和 data-title="标题"

磁通量
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui跳转html如何带参数,Layui跳转页面代码（可携带复杂参数）
weixin_42519985的博客
06-08 7028
今天用了Layui的“数据表格 - 数据操作”示例代码，结果发现点击“编辑”按钮出出来一个弹出消息框，效果如下：虽然说也可以用“弹出层”做编辑页面，但是，由于我编辑的东西很多，用“弹出层”不太理想。我就想能不能像URL链接那样，直接点击链接就跳转走了。例如：点击一个”编辑“按钮，就直接跳转到相对应的”编辑页面“。下面是我给大家的方法，大家可以做一个参考：注意：Layui跳转页面代码最重要的部份是l...
js layui跳转页面_解决layer弹出层的内容页点击按钮跳转到新的页面问题
weixin_33716865的博客
12-28 6624
在参与的一个项目中，有一个这样的需求，导入基础数据成功后，默认弹出一个管理员登录页，点击登录按钮，需要跳到管理页面。导入页按钮：导入导入按钮的点击事件，点击后会出现layer弹出层$("#start").click(function(){// 判断有没有选择区域var regionCode = $("#regionCode").val();if(regionCode!=0){// 获取区域名，用于...
layui后台框架，将左侧功能栏目 集中到一个页面，通过上面的tab切换 在iframe加载对应页面
zhang123csdn的博客
04-08 404
layui后台框架，将左侧功能栏目 集中到一个页面，通过上面的tab切换 在iframe加载对应页面
layuimini框架实现点击菜单栏回到起始页
最新发布
cqdddgs的博客
06-12 389
/ 删除现有tab。window.location.href=""进行了页面跳转，再点击菜单栏是不会显示起始页，而是跳转后的页面，在miniTab.js文件中找到：listen方法。// 强制重新加载初始页面。在layui页面中，如果使用了。
layui框架中如何实现，在登录超时实现自动跳转登录页？
qq_26780317的博客
09-15 4007
前言：         最近，接手了一个layui框架做的系统，现在需要实现接口登录超时，自动跳转到登录页的操作。          方案：后台判断是否超时，前端根据接口返回的code码，实现自动跳转至登录页面。          问题点：前端重定向经常使用的是----w
layui 跳转页面时的传参和取值问题
zyt_oneself的博客
03-31 7716
layui 跳转页面时的传参和取值问题前言一、跳转页面1.弹框按钮2.调用弹框方法二、取值1.取值的方法2.调用方法总结 前言 layui 如何在当前页面点击按钮弹框，弹出的框内容为新页面，将值传到该页面中，并进行取值，是本篇文章主要记录的问题。 提示：以下是本篇文章正文内容，下面案例可供参考 一、跳转页面 点击弹框按钮，弹出新页面，用一下方法，layer.open即弹出一个窗口 示例如下： 1.弹框按钮 <button class="layui-btn layui-btn-normal" id=
00024-layui 在一个页面，打开另一个页面，iframe版
06-04 1738
在我的客户页面，调整到 我的合同页面： <div>请去【<a style="color:green" class="toPage" data-type="toPage" >合同管理—我的合同</a>】页面提交审核！</div> js: var active = { toPage:function () { top.layui.index.openTabsPage("order/myOrdersList.jsp"
在layui tab控件中载入外部html页面的方法
12-29
目前，潜入外部网页的方式，主要有3种： iframe方式 <div><iframe src=xxx.jsp></iframe> ajax方式 “externalHtml> ajax加载数据后，直接赋予 ...<div class=layui-tab lay-filter=demo lay-data={>
layui点击导航栏刷新tab页的示例代码
10-18
今天小编就为大家分享一篇layui点击导航栏刷新tab页的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui type2 通过url给iframe子页面传值的例子
10-16
在给定的代码中，`layui.use(["layer"], function () {...})`确保了layui的layer模块已经加载完毕，然后调用`layui.layer.open`方法打开一个新的弹窗： ```javascript layui.layer.open({ type: 2, title: "管理...
layui easyweb iframe v3.1.8源码
12-08
[增加] loading风格增加了一个layui简约样式 [增加] 增加tab切换、侧边栏点击、多系统切换等事件监听 [优化] 切换tab自动刷新支持每个子页面自定义刷新方法，可实现切换tab只重载表格 [优化] treeTable升级(增加...
layui问题之自动滚动二级iframe页面到指定位置的方法
10-16
今天小编就为大家分享一篇layui问题之自动滚动二级iframe页面到指定位置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
LayUI之动态选项卡Tab&iframe使用
m0_62604616的博客
07-18 1355
可以看见已经更改了，但是有重复的，所以我们要进行再一次的优化。将官网中任意一种选项卡的代码复制下来，粘贴到你要用的地方。然后我们PermissionDao这个类也进行改动。①、查找layui的选项卡页面布局代码--静态。④重复的tab选项卡不添加，改为选中。只要将openTab方法进行改动即可。③优化UserAction。③、将选项卡名称换成菜单名。①创建实体类User。...
layui自己添加图片按钮并点击跳转页面
九亿宅男的梦的博客
05-16 3598
1.按钮样式 <table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table> <script type="text/html" id="toolbtn"> <a class="" lay-event="down">...
使用X-admin(Layui)前端框架实现新Tab页面内刷新其他Tab页面的解决方案
奇妙的Bug之旅
10-23 465
在Web开发中，我们经常会遇到需要在打开新Tab页面后刷新其他Tab页面的需求。本文将介绍如何使用X-admin(Layui)前端框架来实现这一功能，并提供详细的代码片段来帮助您更好地理解和应用这些技术。
web前端-单页版/一个页面-实现(区别于iframe)
Best_lgx的博客
12-25 1540
web前端-单页版/一个页面-的实现(区别于iframe) 好奇心的小白 就来研究一下单页版的实现–不喜勿喷-哈哈 1.用到的知识 Html、Css、JavaScript 和Layui、jQuery 2.CDN引用所需Layui和jQuery <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css" /> <script src="http.
js layui跳转页面_LayUI实现前端分页功能
weixin_42520796的博客
01-27 1305
本文主要为大家带来一篇基于LayUI实现前端分页功能的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。一、LayUI介绍Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。内置了一些常用元素和组件的UI框架。下载后引入项目中。二、LayPage参数介绍laypage是内置...
Layui实现页面内部的iframe跳转
07-28
要在页面内部使用 iframe 进行跳转，可以使用 Layui 提供的 `element.tabAdd` 和 `element.tabChange` 方法来实现。 首先，在 HTML 中定义一个包含 iframe 的容器，例如： ```html <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <iframe src="page1.html" frameborder="0" class="layui-tab-content-item"></iframe> </div> </div> ``` 然后，在 JavaScript 中使用 `element.tabAdd` 方法添加新的选项卡，并使用 `element.tabChange` 方法切换到对应的选项卡，实现 iframe 的跳转。例如： ```javascript layui.use('element', function(){ var element = layui.element; // 添加新的选项卡 element.tabAdd('demo', { title: '页面2', content: '<iframe src="page2.html" frameborder="0" class="layui-tab-content-item"></iframe>', id: 2 // 需要指定一个唯一的 id }); // 切换到对应的选项卡 element.tabChange('demo', 2); // 切换到页面2 }); ``` 注意，`element.tabAdd` 方法需要传入一个唯一的 id，用于标识选项卡，而 `element.tabChange` 方法则可以传入选项卡的 id 或标题（title）来切换。 以上就是使用 Layui 实现页面内部的 iframe 跳转的基本步骤。你可以根据实际需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值