layer添加元素 openlayer_Layer组件多个iframe弹出层打开与关闭及参数传递
一、Layer简介
Layer是一款近年来备受青睐的web弹层组件，基于jquery，易用、实用，兼容包括IE6在内的所有主流浏览器，拥有丰富强大的可自定义的功能。
二、多个iframe弹出层(非嵌套)
1.打开iframe弹出层js代码
(1)示例一：
layer.open({
type:2,
title:'layer mobile页',
shadeClose:true,
shade:0.8,
area:['380px','90%'],
content:'mobile/'//iframe的url
});
content参数可传入要打开的页面，type参数传2，即可打开iframe类型的弹层
(2)示例二：
layer.open({
type:2,
title:false,
closeBtn:0,//不显示关闭按钮
shade:[0],
area:['340px','215px'],
offset:'rb',//右下角弹出
time:2000,//2秒后自动关闭
anim:2,
content:['test/guodu.html','no'],//iframe的url，no代表不显示滚动条
end:function(){//此处用于演示
layer.open({
type:2,
title:'很多时候，我们想最大化看，比如像这个页面。',
shadeClose:true,
shade:false,
maxmin:true,//开启最大化最小化按钮
area:['893px','600px'],
content:'//fly.layui.com/'
});
}
});
(3)示例三：在弹出层A中打开新弹出层B，与弹出层A同一DOM层级
可根据项目需求，简单封装弹出层打开方法,如下：
//在弹出层A(子页面1)打开新弹出层B(子页面2)，弹出层A、B在同一DOM层级，即父页面内有多个iframe，子页面2不嵌套在子页面1中；
//在弹出层A(子页面1)中封装如下方法，在需要触发打开新弹出层B事件中执行如下方法；
functionopenLayerUrl(url,width,height){
parent.layer.open({
type:2,
title:false,
closeBtn:false,
shadeClose:false,
shade:0.6,
border:[0],
area:[width <=0?"auto":width +'px',height <=0?"auto":height +'px'],
content:url,
})
}
2.关闭iframe弹出层js代码
(1)关闭特定iframe
//当在iframe页面关闭自身时，在iframe页执行以下js脚本
varindex =parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
parent.layer.close(index);//再执行关闭
(2)关闭所有弹出层
如果没有弹层叠加等复杂逻辑，可根据需要关闭所有弹出层
layer.closeAll();//疯狂模式，关闭所有层
layer.closeAll('dialog');//关闭信息框
layer.closeAll('page');//关闭所有页面层
layer.closeAll('iframe');//关闭所有的iframe层
layer.closeAll('loading');//关闭加载层
layer.closeAll('tips');//关闭所有的tips层
3.刷新另一个弹出层
(1)刷新已知index的iframe弹层
layer.iframeSrc(index,'http://sentsin.com')//官方示例，其中参数index为iframe索引，第二个参数为iframe的URL，暂未使用过
(2)刷新未知index的iframe弹层
parent.$("iframe").each(function(){
$(this).attr('src',$(this).attr('src'));//需要引用jquery
})
如果刷新所有iframe不影响，则可以重置所有iframe。在弹层A关闭后，需要刷新弹层B，在弹层A执行以上脚本后关闭当前弹层A；
4.iframe弹出层参数传递
(1)父页面传参到iframe弹出层
varcollectionId =parent.$("#hideCollectionId").val();//可在父页面定义隐藏域，id为hideCollectionId，需要引用jquery
(2)iframe弹出层A传参到iframe弹出层B
比如在弹出层A按钮打开另一个弹出层B，可在layer.open()函数content参数配置中，以URL形式传参即可,(content:'http://www.baidu.com?id='+100)
修改
//在ASP.Net MVC Razor视图中使用示例，openLayerUrl()为本篇中介绍的打开Layer弹出层的封装方法，closeLayer()为封装的关闭layer弹出层的方法；
也可以考虑使用success(弹出后回调)、end(销毁后回调)、cancel(关闭回调)等参数配置中做其他工作；
三、多个iframe弹出层(嵌套)
1.弹出层打开与关闭
如果使用嵌套的iframe也是可以的，如iframe弹出层B(子页面2)嵌套在iframe弹出层A(子页面1)中，iframe弹出层A嵌套在父页面中，
在父页面打开弹出层A，父页面脚本用layer.open()；
在弹出层A打开弹出层B,子页面2脚本用layer.open()；
在弹出层B中关闭弹出层A和B，弹出层B用脚本parent.parent.closeAll()；
2.弹出层传参
jquery取得父页面元素：
parent.parent.$("#hideCollectionId").val()；//取得父页面之父页面的非动态生成的元素
$("#hideCollectionId",parent.parent.document).val()；//取得父页面之父页面的动态生成的元素
(1)jquery在父窗口中获取iframe中的元素
Jquery代码 父窗口中获取iframe中的非动态生成元素
格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1
Jquery代码 父窗口中获取iframe中的动态生成元素
格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2
(2) jquery在iframe中获取父窗口的元素
格式：$('#父窗口中的元素ID', parent.document).click();
实例：$('#btnOk', parent.document).click();
四、不显示iframe中的滚动条
有时候不想让iframe弹层出现滚动条，则可以在content参数中传入一个字符串数组
layer.open({
type:2,
content:'http://sentsin.com'//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
更多使用技巧，请移步官网阅读弹层组件开发文档
结语
本篇介绍了Layer弹出层组件在多个弹出层场景使用及传参方法，包括非嵌套弹出层和嵌套弹出层打开与关闭方法。