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

星雪大大_4804

星雪大大_4804

2026-06-25

911人浏览

原创

推荐用 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 的地方)监听:

Feishu calendar sync, local ics to json data for AI agent
Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式,用于飞书日历导入导出及数据集成。

下载
// 父页 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 策略拦截才意识到问题。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui layui弹出层 js json

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

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

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

2023.08.07

2015

5

json是什么
json是什么

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

2023.08.23

2882

1

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

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

2023.10.13

976

3

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

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

2025.09.10

3239

7

ajax教程
ajax教程

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

2023.06.14

2540

4

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

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

2023.08.31

340

5

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

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

2023.11.15

2373

5

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

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

2024.09.24

1141

6

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 10.9万人学习

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

共5课时 | 1.6万人学习