layui从子iframe打开父iframe的tab选项卡

Posted dingxu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui从子iframe打开父iframe的tab选项卡相关的知识,希望对你有一定的参考价值。

数据表格字段:
{field: ‘novelId‘, title: ‘小说ID‘,width:100,templet: ‘<div><a href="javascript:;" _href="/contentManage/content-chapters.html" novelName="{{d.name}}" onclick="showChapters(this,{{d.novelId}});" class="layui-table-link">{{d.novelId}}</a></div>‘}
 
function showChapters(obj,param) {
        layui.use([‘element‘], function () {
            $ = layui.jquery;
            element = layui.element;
           var novelName=$(obj).attr("novelName");
            var url=$(obj).attr("_href")+"?param="+param;//携带小说id,展示该小说下的全部章节
            for (var i = 0; i <$(‘.x-iframe‘,window.parent.document).length; i++) {//获取父页面的dom元素
                if($(‘.x-iframe‘,window.parent.document).eq(i).attr(‘data-id‘)==param){
                    parent.element.tabChange(‘x-tab‘, i);
//x-tab 为父页面<div class="layui-tab layui-tab-card site-demo-title x-main" lay-filter="x-tab" lay-allowclose="true"></div>
                    return;
                }
            };
            res = parent.element.tabAdd(‘x-tab‘, {//从父页面添加tab选项卡,如果不指定id,选项卡id会自增
                title: novelName //用于演示
                ,content: ‘<iframe frameborder="0" data-id="‘+param+‘" src="‘+url+‘" class="x-iframe"></iframe>‘
            });
            parent.element.tabChange(‘x-tab‘, $(‘.layui-tab-title li‘,window.parent.document).length-1);//添加选项卡后,默认此tab为选中状态
 
            $(‘.layui-tab-title li‘,window.parent.document).eq(0).find(‘i‘).remove();
 
        });
    }

以上是关于layui从子iframe打开父iframe的tab选项卡的主要内容,如果未能解决你的问题,请参考以下文章

layui 弹窗的iframe 父子界面相互传值

layui弹窗 iframe嵌套页面内的弹窗如何覆盖到父级页面

layui: 子iframe关闭/传值/刷新父页面

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

子页面iframe如何调用 父页面的方法 或者对象(基于layui框架)

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