子页面可通过parent.变量名访问主页面window上的全局变量,但需避免闭包隔离;跨域时须用postMessage通信;layer.getChildFrame()返回jQuery对象而非iframe窗口对象,调用layui模块需用contentWindow。
子页面直接访问 parent 上的全局变量
只要主页面声明的是全局变量(即挂在 window 上,没被函数作用域隔离),子 iframe 页面就能用 parent.变量名 直接读取。
常见错误是主页面把变量定义在 layui.use 回调里或某个闭包中,导致子页面访问时返回 undefined。
- ✅ 正确写法(主页面):
window.userData = { id: 123, name: 'test' }; - ❌ 错误写法(主页面):
layui.use(['table'], function(){ var userData = {...}; });→ 子页面拿不到 - 子页面获取:
console.log(parent.userData);
主页面通过 success 回调向子页面传参
比依赖全局变量更可控,尤其适合传递一次性数据(如 ID、token、配置项),避免污染 window。
layer.open 的 success 回调能拿到 iframe 的窗口对象,可直接调用子页面暴露的方法并传参。
- 主页面调用:
layer.open({ type: 2, content: '/child.html', success: function(layero, index) { var iframeWin = window['layui-layer-iframe' + index]; iframeWin.init({ orderId: 8899, token: 'abc123' }); } }); - 子页面需提前定义接收方法:
window.init = function(data) { console.log(data.orderId); }; - 注意:
init必须挂到window上,且定义要早于父页面调用,否则报iframeWin.init is not a function
跨域 iframe 下 parent 访问会失败
如果子页面域名与主页面不一致(比如主站是 admin.example.com,iframe 是 api.example.com 或第三方地址),浏览器会阻止 parent.xxx 访问,抛出 Blocked a frame with origin ... from accessing a cross-origin frame 错误。
此时不能靠直接读取,必须换方案:
- 主子页面协商使用
postMessage通信(推荐) - 主页面发消息:
iframeWin.postMessage({ type: 'GET_DATA' }, 'https://child-domain.com'); - 子页面监听:
window.addEventListener('message', e => { if (e.origin === 'https://parent-domain.com') { ... } }); - 服务端做代理或同域部署是最省事的绕过方式
用 layer.getChildFrame() 拿不到 layui 模块实例
文档里写的 layer.getChildFrame() 返回的是 jQuery 对象(contents().find('body') 那种),不是 iframe 的 window 对象,所以不能用来调用子页面的 layui.xxx 方法或变量。
真正要操作子页面的 layui 实例,必须走 window['layui-layer-iframe' + index] 或 layero.find('iframe')[0].contentWindow。
- ✅ 可用:
layero.find('iframe')[0].contentWindow.layui.form.val('formFilter'); - ❌ 不可用:
layer.getChildFrame().layui.form.val(...)→ 报错Cannot read property 'form' of undefined - layui 的模块(
form、table、tree)都是绑定在 iframe 窗口自身的layui对象上,不是 DOM 树里的东西
layer.getChildFrame() 的误用——它返回的不是窗口对象,这点最容易忽略。











