layui关闭iframe弹出层，方法失效

layui中iframe弹出层关闭问题及解决方案

原创于 2024-01-26 15:34:10 发布 · 903 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#layui

layui 专栏收录该内容

5 篇文章

订阅专栏

文章讲述了layui框架中如何正确使用iframe弹出层，并提到在使用`layer.open`时，忽视了弹层类型的设定。官方文档指出，当type设置为2时，content中的页面地址才能被识别为内联框架层，从而实现正常关闭。

原文链接：layui关闭iframe弹出层，方法失效

//父页面
layer.open({
            type: 1,
            title:"添加用户",
            content: '<iframe name="select" style="width: 1316px;height: 617px;" src="useradd.jsp" frameborder="0" class="layadmin-iframe"></iframe>',
            area: ['1316px', '617px'], // 初始宽高
            maxmin: true,
            success: function(layero, index){
              layer.full(index); // 最大化  

            }
            });

//子页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

layui 官方文档中也是用的这样的方法关闭弹层。

但是我忽略了重要的一点，那就是弹层的类型。

官方文档的描述是这样说的：

//在 iframe 弹层页面中关闭自身
var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
parent.layer.close(index); // 再执行关闭

说的是在 iframe 弹层页面中关闭自身。

layer.open 打开的弹出层有多种：

0 dialog 信息框（默认），同时只能存在一个层
1 page 页面层，可同时存在多个层
2 iframe 内联框架层，可同时存在多个层
3 loading 加载层，同时只能存在一个层
4 tips 贴士层，可配置同时存在多个层

content 定义的看似是 iframe，但真正决定它性质的还是 type 的值。

将 type 修改为 2 后，再将 content 换成页面地址后，可正常关闭。