父页面需全局定义函数(如setchoosevalues),子页面通过parent.setchoosevalues(data)调用并传参,调用前应判断函数存在性,随后用parent.layer.close关闭弹窗;避免依赖layer.getchildframe读取子页js变量,推荐postmessage或直接操作dom。
layer.open 打开的 iframe 弹窗(type: 2)与父页面通信,核心就一条:子页调用 parent 对象上的方法或变量,父页提前定义好接收逻辑。不是靠 url 参数、不是靠 localstorage,而是直接走 js 作用域链和 dom 引用。
子页面调用 parent.setChooseValues 是最稳的方式
父页面必须先声明一个全局函数(比如 setChooseValues),子页面在点击“确定”时主动调用它,并传入数据对象。
常见错误现象:parent.setChooseValues is not a function —— 说明父页没挂到 window 上,或者子页执行时机早于父页函数定义(比如放在 $(document).ready 里但子页脚本已运行)。
- 父页要写在
<script></script>标签里,且不包裹在任何闭包或异步回调中,确保全局可访问 - 子页调用前建议加判断:
if (typeof parent.setChooseValues === 'function') { parent.setChooseValues(data); } - 调用后立刻关闭弹窗:
var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);
layer.getChildFrame 在父页里取子页 DOM 或变量容易失效
父页在 success 回调里用 layer.getChildFrame('body', index) 只能拿到子页 body 的 jQuery 对象,不能直接读子页 JS 变量 —— 因为 iframe 内容还没完全加载完,或子页 JS 还未执行。
性能 / 兼容性影响:Chrome 会更严格限制跨 iframe 访问时机,Firefox 可能报 Blocked a frame with origin ... from accessing a cross-origin frame(同源才可用)。
- 如果非要从父页读子页内容,等子页发通知更可靠:子页用
parent.postMessage(需同源),父页监听window.addEventListener('message', ...) -
layer.getChildFrame更适合操作子页静态 DOM,比如预填表单字段、注入初始值 - 别依赖
window[layero.find('iframe')[0]['name']]—— name 属性可能为空或被覆盖,不稳定
子页直接读父页 DOM 或变量要用 parent.$ 和 parent.xxx
子页可以直接访问父页的 jQuery 实例(前提是父页已加载 jQuery)和全局变量,例如:
var orderId = parent.$('#orderId').val(); // 读父页 input 值
var config = parent.myConfig; // 读父页 var myConfig = { api: '/v1/' };
容易踩的坑:parent.$ 报错通常是因为父页没加载 jQuery,或子页执行太快(DOM 未 ready)。不要在子页 <script></script> 标签顶部就调用,加个延时或监听 DOMContentLoaded。
- 推荐写法:
parent.document.getElementById('xxx')更轻量,不依赖 jQuery - 如果父页用了模块化(如 ES6 import),变量不会自动挂到
parent,必须显式赋值给window.xxx - 避免深层嵌套调用,比如
parent.parent.xxx—— 多层 iframe 容易断链
复杂点在于父子页生命周期不同步,以及同源策略的隐形约束。最不容易出错的路径就是:父页暴露函数 → 子页主动调用 → 父页处理并关闭弹窗。其他方式都多一层不确定性。











