讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui弹出层如何实现子窗口向父窗口传递一个JSON对象

风强吖_1163

风强吖_1163

发布时间:2026-04-17 03:13:28

|

649人浏览过

|

来源于php中文网

原创

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

layui弹出层如何实现子窗口向父窗口传递一个json对象

子窗口怎么把 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() 解析,有安全风险。父子页同域下直接传对象引用即可。

Wjs Uploading Video
Wjs Uploading Video

将一个或多个视频上传至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 加载未完成就调用父函数,或者父页回调函数名拼错多一个空格——这种错不会报异常,只会静默失败。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2095

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3162

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1076

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3599

2025.09.10

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2820

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2633

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1161

2024.09.24

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn