Layer组件多个iframe弹出层打开与关闭及参数传递

一、打开iframe弹出层js代码

1、示例一

layer.open({
type: 2, // iframe类型
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'mobile/' //iframe的url
});

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,
            })
        }

二、关闭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层

三、刷新另一个弹出层

1、刷新已知index的iframe弹层

//官方示例，其中参数index为iframe索引，第二个参数为iframe的URL
layer.iframeSrc(index, 'http://sentsin.com')

2、刷新未知index的iframe弹层

parent.$("iframe").each(function () {
   $(this).attr('src', $(this).attr('src'));//需要引用jquery
})

四、iframe弹出层参数传递

1、父页面传参到iframe弹出层

var collectionId = parent.$("#hideCollectionId").val();
//可在父页面定义隐藏域，id为hideCollectionId，需要引用jquery

2、iframe弹出层A传参到iframe弹出层B

比如在弹出层A按钮打开另一个弹出层B，可在layer.open()函数content参数配置中，以URL形式传参即可，也可以考虑使用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()；//取得父页面之父页面的动态生成的元素

引用地址：https://www.cnblogs.com/EvanFan/p/7718065.html