子页面调用 parent 报“cannot read property 'xxx' of null”常见原因是混淆了 window.parent 与 window.opener：layui layer.open 的 iframe 子页中，window.parent 指向顶层窗口，而真正要操作的是调用方页面，应优先使用 window.opener（同源时），并校验 !window.opener.closed；跨域时必须用 postmessage 并严格校验 origin。
子页面调用 parent 时提示 “cannot read property 'xxx' of null”
常见原因是子页面运行在 iframe 环境下，但未正确获取父页面上下文。layui 的 layer.open 默认用 iframe 加载子页面，此时 window.parent 是顶层窗口，而实际需要操作的是打开弹层的那个页面（即 opener 页面）。直接用 parent.document 或 top.document 很容易报错或改错地方。
- 优先用
window.opener—— 它指向调用layer.open的那个窗口，是真正要修改的父页 - 若子页面被跨域加载（比如 src 是不同域名），
window.opener会被浏览器限制，读取属性或 DOM 操作会抛SecurityError - 同源前提下，确保子页面脚本在 DOM 加载完成后执行，避免
window.opener.document.getElementById(...)找不到元素
修改父页面 DOM 的典型写法（同源场景）
不要依赖 parent 或 top，明确用 window.opener 并加健壮性判断：
if (window.opener && !window.opener.closed) {
const parentDoc = window.opener.document;
const targetEl = parentDoc.getElementById('user-name');
if (targetEl) {
targetEl.innerText = '新用户名';
}
// 触发自定义事件，让父页主动响应（更推荐）
window.opener.dispatchEvent(new CustomEvent('layer-data-updated', {
detail: { name: '张三', id: 123 }
}));
}
-
window.opener在 iframe 子页中有效，且指向调用方，比parent更准确 - 必须检查
!window.opener.closed，否则父页已关闭时操作会报错 - 直接改 DOM 简单粗暴，但耦合强；用
CustomEvent让父页监听并处理，更易维护
父页面如何配合监听子页传来的数据
父页需提前注册事件监听，而不是等子页调用后才准备逻辑：
// 父页 JS（在 layer.open 之前或页面初始化时执行）
window.addEventListener('layer-data-updated', function(e) {
console.log('收到子页更新：', e.detail);
document.getElementById('user-name').innerText = e.detail.name;
});
- 事件名建议用带前缀的（如
layer-data-updated），避免和其他库冲突 - 监听必须在子页触发事件前注册，否则会丢失第一次消息
- 如果父页用了 Vue/React，别直接操作 DOM，应通过响应式数据更新（例如
this.userName = e.detail.name）
跨域子页无法访问 window.opener 怎么办
浏览器安全策略禁止跨域 iframe 读写 window.opener 属性，此时唯一可行方案是父子页通过 window.postMessage 通信：
- 子页发送：
window.opener.postMessage({ type: 'UPDATE_USER', data: { name: '李四' } }, 'https://your-parent-domain.com') - 父页监听：
window.addEventListener('message', e => { if (e.origin === 'https://your-child-domain.com') { /* 更新 DOM */ } }) -
postMessage第二个参数必须填父页确切协议+域名，不能用*（尤其生产环境） - 父页收到消息后，仍要校验
e.data.type和e.origin，防止恶意消息注入
跨域场景下，没有捷径，postMessage 是唯一标准解法。漏掉 origin 校验或没配目标域，都会导致功能失效或安全隐患。
