子窗口需通过window.parent[回调名]传JSON回父窗口,父页须在layer.open的success中动态挂载带唯一索引的回调函数,子页调用后延时关闭iframe以确保执行完成。

子窗口怎么把 JSON 传回父窗口(Layui layer.open 场景)
必须用 layer.getChildFrame() 或 window.parent,不能直接调父作用域变量——因为 layui 弹层默认用 iframe 加载子页面,父子是跨域隔离的两个执行上下文。
常见错误现象:Uncaught TypeError: Cannot read property 'xxx' of undefined,本质是子页里写 window.parent.xxx 却没等父页 layer 实例就绪,或父页没暴露接收入口。
- 子页中用
window.parent.layui.layer.getFrameIndex(window)获取当前 iframe 的 index,再通过window.parent.layer.getChildFrame('#id', index)拿到父页 DOM 节点(慎用,仅限同域) - 更稳的做法:子页主动调用
window.parent.callbackFromChild(前提是父页提前挂了这个函数) - 父页打开弹层时,必须在
success回调里挂好接收函数,不能写在open外层——否则子页加载完成时它还没定义
父窗口如何安全暴露接收函数(避免污染全局)
别直接挂 window.callbackFromChild = function(){},layui 项目常有多个弹层共存,容易冲突。应该绑定在 layer 实例上或用闭包隔离。
使用场景:一个页面同时开多个编辑弹窗,每个都要传不同数据回对应位置。
- 父页打开弹层时,在
success里定义唯一回调:var callback = function(data){ console.log('收到', data); }; - 然后挂到
window.parent下带前缀的临时名:window.parent[`callback_${index}`] = callback;(index来自layer.open()返回值) - 子页调用时传这个 key:
window.parent[`callback_${key}`](jsonData),用完可删:delete window.parent[`callback_${key}`]
JSON 对象传参时要注意什么(类型和序列化陷阱)
别用 JSON.stringify() 再传——子页拿到的是字符串,不是对象;也别用 eval() 解析,有安全风险。父子页同域下直接传对象引用即可。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
性能影响:大 JSON(>1MB)跨 iframe 传递会卡顿,但一般业务数据远小于此。
- 子页确保
jsonData是合法 JS 对象,不含function、undefined、Date等无法结构化克隆的值 - 如果含
Date,先转成字符串:jsonData.time = new Date().toISOString() - 父页接收后,建议用
JSON.parse(JSON.stringify(data))做浅拷贝,防止子页后续修改影响父页状态
为什么 layer.close() 后还收不到数据(时机问题)
很多人在子页里写 window.parent.callback(...); layer.close();,结果父页收不到——因为 layer.close() 会立刻销毁 iframe,JS 执行被中断。
错误现象:callback is not a function 或控制台无输出,但断点发现子页确实执行到了调用行。
- 必须先传数据,再延时关闭:
window.parent.callback(data); setTimeout(function(){ layer.close(layer.getFrameIndex(window)); }, 0); - 或者改用
parent.layer.close(parent.layer.getFrameIndex(window)),由父页主动关,确保子页 JS 完整执行 - 不推荐用
beforeClose钩子捕获——它只在父页触发,拿不到子页数据
最麻烦的其实是 iframe 加载未完成就调用父函数,或者父页回调函数名拼错多一个空格——这种错不会报异常,只会静默失败。

















