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

Layui弹出层layer.open如何实现子页面向父页面传递复杂的JSON对象

星雪大大_4804

星雪大大_4804

发布时间:2026-06-25 16:36:58

|

911人浏览过

|

来源于php中文网

原创

推荐用 window.parent.postMessage 传 JSON,父页监听 message 事件接收;因 layer.close 回调不接收子页数据,getChildFrame 受同源和时机限制,轮询方案脆弱不可靠。

layer.open 打开的子页面怎么把 JSON 对象传回父页面

直接用 window.parent + 自定义事件是最稳妥的方式,layer.getframeindex 和 layer.close 本身不支持传参,强行塞进 layer.close 的回调参数里会丢失嵌套结构或引发类型错误。

为什么不能靠 layer.close 的回调参数传复杂对象

layer.close 的回调函数(如 yes 或 end)只在关闭时触发,不接收子页传入的数据;而 success 是打开后立即执行的,此时子页 DOM 可能还没加载完,更无法读取子页变量。试图用 layer.getChildFrame 在父页主动取值,又受限于跨 iframe 的 DOM 访问策略(同源才可行)和时机问题(子页 JS 可能未执行完毕)。

  • layer.getChildFrame 返回的是 iframe.contentWindow.document,不是子页 JS 上下文,拿不到 var data = {...} 这样的局部变量
  • 子页若用 layui.use 异步加载模块,parent.layer.getChildFrame 立即访问很可能读到 undefined
  • 不同浏览器对 iframe 跨域限制不一致,即使同源,部分版本也会报 Blocked a frame with origin ... from accessing a cross-origin frame

推荐做法:子页用 window.parent.postMessage 发送,父页监听 message

这是唯一能可靠传递任意 JSON(含函数以外的所有类型,如 Date、RegExp、嵌套对象、数组)的方式,且天然支持跨域(需校验 event.origin)。

子页(iframe 内)发送:

// 子页 JS 中
const result = {
  userId: 123,
  tags: ["admin", "vip"],
  profile: { name: "张三", joined: new Date() }
};
// 注意:new Date() 会被序列化为字符串,这是正常行为
window.parent.postMessage({ type: "LAYER_DATA_SUBMIT", data: result }, "*");
// 生产环境建议把 "*" 换成父页确切 origin,如 "https://yourdomain.com"

父页(调用 layer.open 的地方)监听:

Json Schema Toolkit
Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载
// 父页 JS 中,在 layer.open 前或后注册一次即可
window.addEventListener("message", function(event) {
  // 安全校验:确保消息来自自己的子页
  if (event.source !== window || event.data.type !== "LAYER_DATA_SUBMIT") return;
  
  console.log("收到子页数据:", event.data.data);
  // 此处可操作 data,比如赋值给表单、更新列表、关闭弹层等
  layer.close(layerIndex); // 如果需要自动关闭
});

注意:layer.open 返回的索引 layerIndex 需提前保存,例如:

const layerIndex = layer.open({
  type: 2,
  content: "child.html",
  area: ["600px", "400px"]
});

如果必须用 layui 自带机制,只能走全局变量 + 定时轮询(仅限简单场景)

仅当子页与父页完全同源、且数据结构极简单(纯 JSON 可序列化字段,不含函数/undefined/Date 等)、且能接受轻微延迟时,才考虑这个降级方案。

  • 子页设置:window.LAYUI_LAYER_RESULT = { status: "success", payload: { id: 1, name: "test" } }
  • 父页在 yes 回调中启动轮询:const timer = setInterval(() => { if (window.LAYUI_LAYER_RESULT) { clearInterval(timer); doSomething(window.LAYUI_LAYER_RESULT); } }, 100)
  • 务必加超时控制,否则子页出错会导致父页无限等待

这种写法脆弱、不可靠,遇到子页 JS 报错或未执行到赋值语句就彻底失效。真实项目里,postMessage 是唯一值得投入的路径。

真正容易被忽略的是 event.source 校验和 origin 白名单——很多人只写 "*",上线后遇到 XSS 风险或被 CSP 策略拦截才意识到问题。

热门AI工具

更多
二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

DeepSeek

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

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

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

讯飞绘文

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

豆包大模型

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

相关专题

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

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

2015

2023.08.07

json是什么
json是什么

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

2922

2023.08.23

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

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

996

2023.10.13

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

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

3299

2025.09.10

ajax教程
ajax教程

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

2580

2023.06.14

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

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

340

2023.08.31

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

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

2413

2023.11.15

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

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

1141

2024.09.24

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

80

2026.09.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.9万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

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

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