layui打开的layer的iframe窗口怎么关闭

1. 前言

在Web开发中，经常需要使用弹出层的功能来展示相关的信息。而layui是一款非常优秀的前端UI框架，它提供了layer模块来实现弹出层的功能。layer模块不仅支持弹出普通的HTML内容，还可以弹出iframe窗口。在实际项目中，我们经常需要关闭layer弹出的iframe窗口，因此本文将介绍如何关闭layui打开的layer的iframe窗口。

2. 使用iframe弹窗的实现

首先，在layer中打开iframe弹窗的代码如下：

    layer.open({
      type: 2,
      title: '弹窗标题',
      shadeClose: true,
      shade: 0.8,
      area: ['80%', '90%'],
      content: 'http://www.example.com/page.html'
    });

这段代码会在页面中打开一个大小为80% * 90%，标题为“弹窗标题”的iframe窗口，窗口中展示的内容来自'http://www.example.com/page.html'。

3. 关闭iframe弹窗的基本方法

在layui中，关闭弹出层的方法是layer.close()，那么如何关闭iframe弹窗呢？因为iframe弹窗和普通弹窗的关闭方法有区别。基本的关闭方法如下：

    var index = layer.open({
      type: 2,
      title: '弹窗标题',
      shadeClose: true,
      shade: 0.8,
      area: ['80%', '90%'],
      content: 'http://www.example.com/page.html'
    });
    //关闭当前的layer弹窗
    layer.close(index);

在打开iframe弹窗时，layer.open()方法会返回一个弹窗的索引，我们可以使用该索引来关闭当前的iframe弹窗。

4. 在iframe中关闭iframe弹窗

通常情况下，在iframe中也需要关闭iframe弹窗。在iframe窗口中调用parent.layer.close(index)即可关闭父窗口中打开的当前弹窗。

下面是一个完整的在iframe中关闭iframe弹窗的示例：

在父窗口中打开iframe弹窗：

    var index = layer.open({
      type: 2,
      title: '弹窗标题',
      shadeClose: true,
      shade: 0.8,
      area: ['80%', '90%'],
      content: 'http://www.example.com/page.html'
    });

在iframe窗口中：

    //获取当前iframe窗口的索引
    var index = parent.layer.getFrameIndex(window.name);
    //关闭父窗口中打开的当前iframe弹窗
    parent.layer.close(index);

5. 关闭所有iframe弹窗

在实际项目中，可能会打开多个iframe弹窗，此时需要关闭所有的iframe弹窗。可以使用layer.closeAll('iframe')来关闭所有的iframe弹窗。

    //关闭所有iframe弹窗
    layer.closeAll('iframe');

6. 总结

本文介绍了如何关闭layui打开的layer的iframe窗口。可以使用layer.close(index)来关闭当前的iframe弹窗，使用parent.layer.close(index)在iframe中关闭父窗口中打开的当前弹窗，使用layer.closeAll('iframe')来关闭所有的iframe弹窗。

layui的layer模块提供了丰富的弹出层功能，不仅可以打开HTML内容的弹窗，也可以打开iframe窗口。掌握layui的layer模块的使用，能够为我们的Web开发带来很多便利。