13518219792
这篇文章主要介绍了Layer组件多个iframe弹出层打开与关闭及参数传递的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联是一家集网站建设,克拉玛依企业网站建设,克拉玛依品牌网站建设,网站定制,克拉玛依网站建设报价,网络营销,网络优化,克拉玛依网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
一、Layer简介
Layer是一款近年来备受青睐的web弹层组件，基于jquery，易用、实用，兼容包括IE6在内的所有主流浏览器，拥有丰富强大的可自定义的功能。
Layer官网地址：http://layer.layui.com/
二、多个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事件中执行如下方法； function openLayerUrl(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脚本 var index = 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弹出层
var collectionId = parent.$("#hideCollectionId").val();//可在父页面定义隐藏域，id为hideCollectionId，需要引用jquery（2）iframe弹出层A传参到iframe弹出层B
比如在弹出层A按钮打开另一个弹出层B，可在layer.open()函数content参数配置中，以URL形式传参即可,（content:'http://www.baidu.com?id='+100）
