原 layui关闭iframe弹出层后刷新父级页面

编辑时间：2018年07月06日 18:11:24

作者：blank__box

原文链接：https://blog.csdn.net/blank__box/article/details/80944774

需求场景

在后台开发中，我们经常会遇到这样的需求：

• 点击按钮 → 弹出 iframe 窗体
• 在 iframe 中的列表中选择需要的用户条目
• 确认并关闭窗体
• 在父级窗体中显示刚才选取的用户（刷新）

解决方案

关键点在于使用 layer.open 的 end 回调函数，配合 [removed].reload() 来实现页面刷新。

完整代码示例

javascript
layer.open({
    type: 2,  // 此处以iframe举例
    title: '名师列表',
    area: ['800px', '600px'],
    shade: 0,
    maxmin: true,
    offset: 'auto',  // 显示坐标 - auto居中
    content: "{:url('admin/trainerlist')}",
    btn: ['关闭'],
    yes: function () {
        layer.closeAll();
    },
    zIndex: layer.zIndex,  // 重点1
    success: function (layero) {
        layer.setTop(layero);  // 重点2
    },
    end: function () {
        [removed].reload();  // 关闭后刷新父页面
    }
});

关键代码解析

1. `end` 回调函数

end 是 layer 的回调函数，在层完全关闭后触发。这正是我们需要刷新父页面的时机。

javascript
end: function () {
    [removed].reload();
}

2. `zIndex` 配置

javascript
zIndex: layer.zIndex  // 重点1

设置层的堆叠顺序，确保弹窗在最上层显示。

3. `success` 回调

javascript
success: function (layero) {
    layer.setTop(layero);  // 重点2
}

在层创建成功后，将其置顶显示。

效果说明

• 点击按钮弹出 iframe 窗口，窗口内显示教师列表
• 用户在子页面中选择需要的教师信息
• 确认后关闭弹窗
• 父页面自动刷新，显示最新的选择结果

注意事项

• end 与 cancel 的区别：cancel 只在点击右上角关闭按钮时触发，而 end 在层完全关闭后（无论何种方式关闭）都会触发
• 性能考虑：[removed].reload() 会重新加载整个页面，如果只需局部刷新，建议使用 AJAX 重载表格数据
• ThinkPHP 集成：示例中使用了 ThinkPHP 的 {:url()} 标签生成 URL，实际使用时请根据您的框架调整

其他刷新方式

如果不想刷新整个页面，也可以使用 AJAX 方式局部刷新：

javascript
end: function () {
    // 刷新表格数据（适用于 layui table）
    table.reload('tableId');
    
    // 或者使用自定义 AJAX 刷新
    $.ajax({
        url: '/api/getLatestData',
        success: function(res) {
            // 更新页面数据
        }
    });
}

总结

通过 layer.open 的 end 回调函数配合 [removed].reload()，可以轻松实现 iframe 弹窗关闭后刷新父页面的功能。这种方法简洁高效，是 Layui 开发中常用的技巧之一。