1. 程式人生 > >layui從子iframe打開父iframe的tab選項卡

layui從子iframe打開父iframe的tab選項卡

link script frame manage ++ name 父iframe jquer con

數據表格字段: {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選項卡