父页面向子页面传参最稳方式是拼接带encodeURIComponent的URL查询参数,子页用URL.searchParams.get读取;子页向父页传值需父页挂window全局函数,子页调用后关闭;跨域时必须用postMessage并严格校验origin。

父页面向子页面传参
要在父页面打开 layer 弹窗时把数据塞进子页面,最稳的方式是拼 URL 查询参数,子页用标准 API 读取。
第一步:在 layer.open 的 content 配置中拼接带参数的 URL,每个值必须单独 encodeURIComponent,例如:content: ['edit.html?id=' + encodeURIComponent(123) + '&name=' + encodeURIComponent('张三'), 'auto']。
第二步:子页面里用 new URL(location.href).searchParams.get('id') 直接取值,不依赖 DOM 加载时机,也不怕 jQuery 版本冲突。
注意:别对整个 URL 调用 encodeURI(),它不编码 & 和 =,会导致参数断裂;也别手写 location.search.split('&') 解析,容易漏掉空格或特殊字符。
子页面向父页面传值
子页面关闭前必须主动把数据交到父页面手里,layer.close() 本身不返回任何值。
方法一:父页提前挂全局函数,子页调用后关闭
在父页面 script 标签最外层(不要包在 layui.use 或 $(document).ready 里)定义:window.onChildSelect = function(data) { console.log('收到', data); };。
子页面点击“确定”时执行:if (typeof parent.onChildSelect === 'function') { parent.onChildSelect({id: 5, name: '李四'}); } → 然后立即调用 parent.layer.close(parent.layer.getFrameIndex(window.name));。
【父页函数必须挂到 window 上,不能用 let/const 声明】,否则子页访问时是 undefined。
跨域场景下安全传参
当子页面和父页面协议、域名、端口任一不同,URL 参数和 parent.xxx 都会被浏览器拦截,必须改用 postMessage。
父页面在顶层窗口(如 layout.html)监听消息:window.addEventListener('message', e => { if (e.origin !== 'https://sub.example.com') return; console.log(e.data); });。
子页面发送时必须指定完整 origin:parent.postMessage({type: 'submit', data: formVal}, 'https://sub.example.com');。
漏掉 origin 校验会触发 Invalid target origin 错误,写成 '*' 也不行——Layui 环境下 iframe 可能嵌套多层,必须精确匹配。


















