Layui弹出层iframe调用父页面JS函数的方法解析

父页面函数必须挂到window上才能被iframe子页调用；需确保函数全局可访问、调用时机在父页加载完成后，并加存在性判断；关闭弹窗用parent.layer.close，刷新用局部函数而非location.reload。

能调，但必须确保父页面函数是全局可访问的；直接 parent.xxx() 会报 xxx is not a function 是最常见的失败原因。

父页面函数必须挂到 window 上才能被 iframe 子页调用

子页面里写 parent.funcName()，本质是访问父页面 window 对象上的属性。如果父页面的函数定义在 layui.use 回调里（比如 var funcName = function(){}），它只是局部变量，子页根本看不到。

• ✅ 正确做法：在父页面任意位置（最好在 layui.use 外或回调末尾）显式挂到 window：
  window.submitForm = function(data) { /* 处理逻辑 */ };
• ❌ 错误写法：
  layui.use(['form'], function() { var submitForm = function(){}; }); // 子页调不到
• ⚠️ 注意：如果父页面用了模块化封装（如 exports 或 define），也得额外暴露，不能只靠 parent. 访问内部模块变量

子页面调用时要确认 iframe 是否已加载完成

子页面 JS 执行时机早于父页面 JS 加载完成，parent.submitForm 可能还是 undefined，直接调就报错。

• ✅ 推荐加一层存在性判断：
  if (typeof parent.submitForm === 'function') { parent.submitForm(data); }
• ✅ 更稳妥的做法是监听 load 或用 setTimeout 延迟调用（尤其在 success 回调外触发）
• ⚠️ 不要用 $(document).ready() 替代——子页面 DOM 就绪不代表父页面函数已就绪

关闭弹窗和刷新父页面的典型组合操作

子页面提交成功后，常需关闭自身 + 触发父页面刷新或更新。这两步必须分清作用域和执行顺序。

• ✅ 关闭当前 iframe 弹窗：
  var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);
• ✅ 调用父页面函数并传参：
  parent.refreshTable && parent.refreshTable({ page: 1 });
• ⚠️ 避免写成 parent.location.reload() —— 这会整页刷新，丢失当前状态；应优先走局部刷新函数
• ⚠️ 如果父页面函数依赖 layui 模块（如 table.reload），确保该函数内部已正确 layui.use 或提前初始化好模块实例

真正卡住的地方往往不是语法，而是函数作用域没暴露、调用时机太早、或父子页面跨域（虽少见但一旦发生就完全不可通信）。先检查 window.submitForm 在父页面控制台是否可访问，再看子页面能否 console.log(parent.submitForm) 出来——这一步省掉，后面全白搭。