打开和关闭图层组件的多个iframe弹出图层的方法和参数传递

一、图层介绍

层是近年来流行的网弹性层组件。基于jquery，易用实用，兼容包括IE6在内的所有主流浏览器，拥有丰富强大的可定制功能。

图层官方网站地址：http://layer.layui.com/

第二，多个iframe弹出层(非嵌套)

1.打开iframe弹出层js代码

(1)示例1:

打开({type : 2，title :' layer mobile page '，shade close 3360 true，shade : 0.8，area : ['380px '，' 90%']，content 3360 ' mobile/'//iframe的URL })；内容参数可以传递给要打开的页面，类型参数可以传递给2，打开iframe类型弹性层

(2)示例2:

Open ({type: 2，title: false，closebtn: 0，//不显示关闭按钮shade: [0]，area: ['340px '，' 215px']，offset3360' Rb '，//右下角弹出Time : 2000。//2秒后，自动关闭Anim : 2，Content :[' test/gudu . html '，' no']，iframe的url。No代表end :函数()，不显示滚动条{//这是用来演示图层的。打开({type : 2，title : ')。很多时候，我们希望最大化视图，比如这个页面。shadecolose: true，shade: false，maxmin: true，//打开最大化和最小化按钮area3360 ['893px '，' 600px']，content : '//fly . layui.com/' })；}});(3)示例3:在弹出层A中打开一个新的弹出层B，与弹出层A是同一个DOM级别。

弹出层打开方式可以根据项目要求简单打包，如下：

//在弹出层A(子页面1)中打开一个新的弹出层B(子页面2)。弹出层A和B在同一个DOM级别，即父页面中有多个iframe，子页面2不嵌套在子页面1中；Br//将以下方法封装在弹出层A(子页面1)中，在触发新弹出层B打开的情况下执行以下方法；函数openLayerUrl(url，宽度，高度){ parent.layer.open({ type: 2，title: false，closeBtn: false，shadeClose: false，shade: 0.6，border: [0]，area: [width=0？auto' :宽度' px '，高度=0？Auto' :高度' px']，content: URL，})} 2。关闭iframe弹出层js代码

(1)关闭特定的iframe

//当您在iframe页面上关闭自己时，在iframe页面上执行以下js脚本var index=parent . layer . getframeindex(window . name)；//首先获取当前iframe图层的index parent . layer . close(index)；//再次关闭(2)关闭所有弹出层

如果没有弹性层叠加等复杂逻辑，可以根据需要关闭所有弹出层

layer . closeall()；//疯狂模式，关闭所有图层图层. close all('对话框')；//关闭信息框图层. closeall(' page ')；//关闭所有页面层。close all(' iframe ')；//关闭所有iframe层。closeall(“加载”)；//关闭加载层layer . closeall(' tips ')；//关闭所有提示层3。刷新另一个弹出层

(1)用已知的索引刷新iframe弹性层

layer.iframesrc (index，' http://Zhou.com ')//官方示例，其中参数index是iframe索引，第二个参数是iframe的URL，还没有使用。(2)刷新索引未知的iframe shell。

父母。$(“iframe”)。每个(函数(){ $(this))。attr('src '，$(this)。attr(' src ')；//需要参考jquery})如果刷新所有iframe不影响，可以重置所有iframe。外壳A关闭后，需要刷新外壳B，在外壳A执行上述脚本后关闭当前外壳A；

4.4.iframe弹出层的参数传递

(1)父页面被转移到iframe弹出层

var collectionId=parent。$('#hideCollectionId ')。val()；//您可以在父页面中定义一个隐藏字段，其id为hideCollectionId。你需要参考jquery(2)iframe弹出层a到iframe弹出层b。

比如用弹出图层A按钮打开另一个弹出图层B，可以在layer.open()函数的参数配置中以URL的形式传递参数。(内容： ' http://www.Baidu.com？id=' 100)

a href=' JavaScript : void(0)；'rel=' external no follow ' class=' a1 'brn click=' openlayerrurl '(@ domain amul/Notice/Update？id=' @Model。Id，876，575)；“CloseLayer()”修改了/abr//，并在ASP.Net的MVC razor视图中使用了示例。openlayerUrl()是本文介绍的打开Layer弹出层的封装方法，closeLayer()是关闭Layer弹出层的封装方法。也可以考虑使用成功(弹出后回调)、结束(销毁后回调)、取消(关闭后回调)等参数做其他工作；

第三，多个iframe弹出层(嵌套)

1.弹出层打开和关闭

也可以使用嵌套的iframes。例如，iframe弹出层B(子页面2)嵌套在iframe弹出层A(子页面1)中，iframe弹出层A嵌套在父页面中。

在父页面打开弹出的图层a，父页面脚本使用layer . open()；

在弹出层a中打开弹出层b，子页面2脚本使用layer . open()；

关闭弹出层b中的弹出层a和b，弹出层b使用脚本parent . parent . close all()；

2.弹出层传输参数

Jquery获取父页面元素：

parent . parent . $(' # HideCollectionId ')。val()；//获取非动态生成的元素$(“# hideclectionid”，parent.parent.document)。父页面的父页面的val()；//获取父页面的父页面动态生成的元素。附：jquery的父页面和子页面如何相互访问元素和方法

(1)jquery在父窗口中获取iframe中的元素

在Jquery代码的父窗口中获取iframe中非动态生成的元素

格式：$('#iframe ID ')。目录()。查找(' #iframe控件ID ')。单击()；//jquery方法1

示例：$ ('# IFM ')。目录()。find ('# btnok ')。单击()；//jquery方法1

从Jquery代码的父窗口获取iframe中动态生成的元素

格式：$(在“# iframe”，ID”，document.frames(“框架的框架”)中的控件ID。文档)。单击()；//jquery方法2

示例：$ ('# btnok '，document.frames ('IFM ')。文档)。单击()；//jquery方法2

(2) jquery获取iframe中父窗口的元素

格式：$(父窗口“标识”中的“#元素标识”，父文档)。单击()；

示例：$(“# btnok”，parent.document)。单击()；

第四，不要在iframe中显示滚动条

有时，如果不希望滚动条出现在iframe层上，可以在content参数中传入一个字符串数组

打开({type: 2，content : ' http://things.com '//如果内容是URL，如果不希望iframe有滚动条，也可以content 3360[' http://things.com '，' no '])；更多使用技巧请阅读官网炸弹层组件开发文档

结论

介绍了Layer弹出层组件在多弹出层场景中的使用以及参数传递的方法，包括非嵌套弹出层和嵌套弹出层的打开和关闭方法。希望能给大家一个参考，也希望大家多多支持我们。