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();

});

}

原文地址:https://www.cnblogs.com/dingxu/p/9594195.html

时间: 2024-10-10 01:04:09

layui从子iframe打开父iframe的tab选项卡的相关文章

Layui子页面打开父页面tab问题

我们在使用layui Iframe加载模式时,有时候会在子页面中给主窗体增加一个选项卡页面,上代码,不通用 //打开tab页 function addTabNew(title, url) { //用url作为新页面ID var id = url; //判断是否存在tab,可以通过查看源码确定获取方式是否是li[lay-id='id'] var exist = $("li[lay-id='" + id + "']").length; //如果不存在则新增一个tab i

转 easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素      代码如下:      $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('#objId') 这样调用方法就不会报错 如: parent.$('#objId').tabs("add", { title: title,      content: content,      c

iframe子页面调用父页面js方法

今天开发网站时遇到一个棘手的问题,因为iframe不提倡使用,所以也没怎么关注和研究过iframe. 问题如下: 我通过freedialog设置了一个iframe打开的子页面,页面中原本拥有完整的功能,但是有个取消按钮,如图 右上角已有关闭按钮,但是为了页面的完整性以及保留美工的完整切图样式,没有去除掉取消按钮,现在的目的是要将取消按钮实现关闭功能. <input type="button" value="取消" class="btnqx"

Bootstrap 模态框 + iframe &gt; 打开子页面 &gt; 数据传输/关闭模态框

父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" > <div class="modal-dialog modal-lg"> &l

easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素       代码如下:       $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('# objId') 这样调用方法就不会报错 如: parent.$('# objId').tabs("add", { title: title, content: content, closabl

iframe子页面,父页面相互调用(同域)

先上代码: 父页面.html <!DOCTYPE html> <html> <head> <title>父页面</title> </head> <body> <div id='parent'></div> <iframe id="FrameId" name="frameName" frameborder="0" width="

iframe子页面调用父页面javascript函数的方法

1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面调用 子页面js函数 这个就稍微复杂一些,下面的方法支持ie和firefox浏览器: document.getElementById('ifrtest').contentWindow.b();

iframe子页面获取父页面元素的方法

取得iframe中元素的方法有很多,在本文为大家介绍下在iframe子页面获取父页面元素的方法,下面有个不错的示例,感兴趣的朋友可以参考下 在iframe子页面获取父页面元素 代码如下: 复制代码代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: 复制代码代码如下: $("#objid", document.iframes('iframe').document) 或 复制代码代码如下: $(document.get

iframe子页面调用父页面javascript函数的方法(支持chrome和IE的通用方法)

iframe子页面调用父页面javascript函数的方法 今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题.顺便写一下iframe的父页面调用子页面javascript函数的方法吧,备用! 1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.praent.a(); 但是我在chrome浏览器下却发现此方法无效了!查了半天才了解,在c