layui中iframe子页面中的链接点击后在父页面中动态添加tab选项

最新推荐文章于 2023-04-19 11:10:53 发布
最新推荐文章于 2023-04-19 11:10:53 发布
阅读量3.4k 收藏 15
点赞数 3
分类专栏： layui 文章标签： iframe子页面向父页面动态添加tab
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35500778/article/details/100985697
版权

在父页面中的html页面结构：

iframe子页面的主要HTML结构（js文件是在子页面中引入）：

iframe子页面项父页面添加tab选项并且打开对应的页面的主要js代码（tabadd）如下：

效果图如下：

 

参考了https://fly.layui.com/jie/29230/的方法，若需要可以查看

happy-码蚁
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
[Laui]通过子页面给主页面（框架）添加Tab
德仔
09-20 763
最近在做一个基于LAYUI的后台管理系统，通常在树状菜单动态加载tabpage到iframe中，另外一种场景表格或者子页面打开新页面时如果内容较多弹出窗体体验不够友好，希望动态添加到iframe中。
ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容
10-21
主要介绍了ASP.NET中iframe框架点击左边页面链接,右边显示链接页面内容的实现代码，感兴趣的小伙伴们可以参考一下
在layui tab控件中载入外部html页面的方法
12-29
目前，潜入外部网页的方式，主要有3种： iframe方式 <div><iframe src=xxx.jsp></iframe> ajax方式 <div id=“externalHtml></div> ajax加载数据后，直接赋予 externalHtml[removed] 即可。 script脚本方式 <div>[removed][removed]</div> 第一种方式的示例 <div class=layui-tab lay-filter=demo lay-data={>
使用了layui 页面点击新增tab
tanqingfu1的博客
10-18 4029
1：新打开一个页面&增加一个tab(iframe页面中打开tab事例) parent.xadmin.add_tab('在tab打开','https://www.baidu.com',true) 去掉方法里面的参数true就是 ： iframe页面中打开tab事例(重复点击不刷新) 2:在上一级窗口打开新页面 parent.xadmin.open('在上一级窗口打开open事件',...
layuimini打开新页面/窗口/tab，点击按钮/超链接
weixin_46574356的博客
04-19 3637
layuimini打开新页面/窗口/tab，点击按钮/超链接
【Layui】layui中iframe子页面中的链接点击后在父页面中动态添加tab选项
德仔
06-01 718
iframe子页面的主要HTML结构（js文件是在子页面中引入）： 添加异常履历 效果：
Easyui - 利用iframe打开tab以及在iframe打开父tab
热门推荐
Nisherman
08-12 1万+
此处介绍利用iframe打开tab（先上方法） /** * 在iFrame中打开一个新tab * @param title * @param href */ function openTab(title,href){ var e = $('#tabs').tabs('exists',title); if(e){ $("#tabs").tabs('selec
layui子页面触发父页面创建tab选项卡，同时处理click首次不触发的问题
qq_39189369的博客
03-13 1156
实现子页面调用父页面去创建tab选项卡 //父文件 <div class="page-content"> <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false"> <ul class="layui-tab-title"> <li lay-id='1'>首页</li> &
layui点击某列打开并跳转指定tab
qq_37889636的博客
08-05 3330
第一步添加点击事件的a标签 //showRec是需要添加的监听的名称，d是这行数据 <script> //添加列点击事件 var tplCompanyName = function (d) { var html = '<a style="color:#1E9FFF" href="javascript:;" lay-event="showRec" >'+d.cgi+'</a>'; return html;
layui子页面调用父页面的方法
weixin_38417148的博客
01-28 6616
工作时使用 layui 做弹窗，layui.open()打开子页面经过一些操作确认后需要调用父页面某个方法，具体实现方式如下： 父页面创建一个获取当前iframe层到top层的id集合，每个iframe层都有id。 //获取当前iframe页面id function getIframeIds() { var iframeIds = ''; var frameIndex = 0; //当前window对象 var win = window; var fId; w
layer弹出子iframe层父子页面传值的实现方法
10-17
主要介绍了layer弹出子iframe层父子页面传值的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html判断当前页面是否在iframe中的实例
09-01
下面小编就为大家带来一篇html判断当前页面是否在iframe中的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
layui type2 通过url给iframe子页面传值的例子
10-16
今天小编就为大家分享一篇layui type2 通过url给iframe子页面传值的例子，具有的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
demo_DEMO_子页面刷新父页面iframe_
09-30
子页面刷新父页面
layui中的table中分页无法正常显示
qq_35500778的博客
09-25 4672
问题：如图所示一共有3条数据，但是table分页显示0条，切无法进行上一页，下一页的切换 解决问题：将parseData中的内容删除 parseData:function(da){ if(da.ok){ return{ "code":da.code, ...
静态页面中报 Blocked a frame with origin "null" from accessing a cross-origin frame.原因
qq_35500778的博客
03-25 4285
1.报错的内容是： 2.从编辑器中打开没有问题，但是直接在文件中打开网页，在点击一些事件时，就会出现这种问题，其实这不是跨域问题，因为都没有放到服务器上，这只是因为静态页面直接打开会存在一些问题，若是用编辑器打开页面，就不会有这个问题了。 ...
layui中的table中的自定义全选
qq_35500778的博客
04-03 1942
1.代码 //带有checkbox选择框的表格 <div class="table-box"> <table class="layui-table" id="tables" lay-filter="tableQuanxuan"></table> </div> //表格外自定义的checbox选择框 <div ...
layer中使用iframe弹框弹全屏是时自适应屏幕的问题
qq_35500778的博客
03-25 1581
1.var layers=layer.open({});,在写弹框时将对象赋值； 2.window.onresize=function(){ var docW=$(document).width();//获取浏览器的宽度 var docH=$(window).height();//获取浏览器高度 layer.style(...
iframe中如何子页面和父页面如何通信
最新发布
09-02
在iframe中，子页面和父页面之间可以通过以下几种方法进行通信： 一、postMessage方法： 子页面可以使用postMessage方法向父页面发送消息，通过接收消息的事件监听器在父页面中捕获消息并做出相应处理。子页面发送消息的代码示例如下： ```javascript window.parent.postMessage('Hello from child page!', '*'); ``` 在父页面中，可以通过添加消息事件监听器来接收子页面发送的消息，并进行相应的处理： ```javascript window.addEventListener('message', function(event) { if (event.origin !== '子页面的URL') return; console.log('Message received from child page: ' + event.data); }); ``` 二、window.parent属性： 子页面可以通过window.parent属性直接访问父页面的方法和属性，从而与父页面进行通信。例如，子页面可以通过以下方式调用父页面的方法： ```javascript window.parent.parentMethod(); ``` 三、通过URL参数传递信息： 子页面可以通过URL参数将需要传递的信息附加在URL后面，并在父页面中通过解析URL参数获取子页面传递的信息。子页面设置URL参数的代码示例如下： ```javascript var data = 'Hello from child page!'; var url = window.location.href + '?data=' + encodeURIComponent(data); window.location.href = url; ``` 在父页面中，可以通过解析URL参数来获取子页面传递的信息： ```javascript var urlParams = new URLSearchParams(window.location.search); var data = decodeURIComponent(urlParams.get('data')); console.log('Data received from child page: ' + data); ``` 以上是在iframe中子页面和父页面通信的一些方法，根据具体的需求，可以选择合适的方法进行通信。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值