Layui弹出层layer.open如何传一个Function到子页面-Layui教程-PHP中文网

直接传函数到 layer.open 的 iframe 子页面无效，因 iframe 是独立执行上下文；应通过 window.parent 调用父页同源函数，或用 postMessage 实现跨域通信，避免 eval 或全局变量等危险方式。

layer.open 传函数到子页面为什么不行

直接把 function 当作参数传给 layer.open 的 content（比如 iframe 页面）是无效的——iframe 是独立执行上下文，父页的函数对象无法跨域/跨上下文被子页直接调用。常见错误是写成：layer.open({ content: ['child.html', 'iframe'], success: function(){}, mycallback: function(){} })，但子页里根本拿不到 mycallback。

用 window.parent 让子页主动调用父页函数

这是最轻量、最可靠的方式：不传函数，而是让子页通过 window.parent 访问父页已定义好的函数（前提是同源）。父页需提前挂载函数到全局或可访问作用域：

// 父页定义（确保在 layer.open 前执行）
window.handleFromChild = function(data) {
  console.log('子页传来的数据:', data);
  // 处理逻辑
};

layer.open({
  type: 2,
  content: 'child.html',
  area: ['600px', '400px']
});

子页中直接调用：window.parent.handleFromChild({ msg: 'hello' });。注意检查同源策略，若跨域会触发 SecurityError。

用 postMessage 实现跨域通信（含 iframe name 判断）

如果子页与父页不同源，必须用 postMessage。关键点在于：子页要能准确识别目标父窗口，避免发错消息。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

父页打开 layer 时，记录 iframe 元素并监听 message：

const iframe = document.querySelector('.layui-layer-content iframe');
layer.open({
  type: 2,
  content: 'https://other-domain.com/child.html',
  success: function(layero) {
    window.addEventListener('message', function(e) {
      if (e.source === iframe.contentWindow && e.data.type === 'childSubmit') {
        console.log('收到子页数据:', e.data.payload);
      }
    });
  }
});

子页发送消息前，先确认父窗口存在且可通信：

if (window.parent && window.parent.postMessage) {
  window.parent.postMessage({
    type: 'childSubmit',
    payload: { id: 123, action: 'save' }
  }, 'https://your-parent-domain.com'); // 必须指定 origin，不能用 '*'
}