这个还会有父子页面，并且使用的是layui的iframe

在父子页面之间传递数据可以使用以下方法：

1. 在父页面中定义一个全局变量，然后在子页面中通过 `parent` 对象访问该变量。例如，在父页面中定义全局变量 `data`，在子页面中可以通过 `parent.data` 访问该变量。

2. 使用 `window.postMessage()` 方法进行跨域消息传递。在子页面中使用 `window.parent.postMessage()` 发送消息，然后在父页面中通过 `window.addEventListener('message', callback)` 监听消息，并且在回调函数中处理数据。

在使用 layui 的 iframe 时，可以在 iframe 中通过 `parent` 对象访问父页面中的变量和函数。例如，在子页面中可以通过 `parent.func()` 调用父页面中的函数，或者通过 `parent.data` 访问父页面中的变量。需要注意的是，如果父子页面处于不同的域名下，则需要使用 `window.postMessage()` 方法进行跨域消息传递。

相关问题

layui 父子页面 数据表格

在 layui 中使用数据表格实现父子页面的方式如下：

1.在父页面中，定义一个数据表格并加载数据，使用 layui.table.render() 方法实现：

layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#table',
    url: 'data.json', //数据接口
    page: true, //开启分页
    cols: [[ //表头
      {field: 'id', title: 'ID', width:80},
      {field: 'name', title: '用户名', width:120},
      {field: 'sex', title: '性别', width:80},
      {field: 'city', title: '城市', width:150},
      {field: 'sign', title: '签名', width:200},
      {field: 'experience', title: '积分', width:80},
      {field: 'score', title: '评分', width:80},
      {field: 'classify', title: '职业', width:120},
      {field: 'wealth', title: '财富', width:120}
    ]]
  });
});

2.给数据表格的每一行添加一个事件监听，该事件监听在用户点击某一行时执行，使用 layui.table.on() 方法实现：

table.on('row(table)', function(obj){
  var rowData = obj.data;
  var tr = obj.tr;
  
  //获取当前行数据，并展示子页面
  showChildPage(rowData.id);    
});

3.在父页面中实现一个函数，用于展示子页面，该函数将子页面加载到一个模态框中并打开模态框，通过模态框展示子页面内容：

function showChildPage(userId){
  layui.use(['layer', 'table'], function(){
    var layer = layui.layer;
    var table = layui.table;

    layer.open({
      type: 1,
      title: '子页面',
      area: ['700px', '500px'],
      content: $('#childPage'),
      success: function(layero, index){
        // 在模态框中加载数据表格和数据
        table.render({
          elem: '#childTable',
          url: 'child_data.json',
          where: {
            userId: userId
          },
          page: true,
          cols: [[
            {field: 'id', title: 'ID', width:80},
            {field: 'title', title: '标题', width:400},
            {field: 'content', title: '内容', width:200}
          ]]
        });
      }
    });
  });
}

4.在父页面中添加一个模态框用于展示子页面内容，并在该模态框中添加一个数据表格用于展示子页面数据：

<!-- 定义模态框 -->
<div id="childPage" style="display:none;">
  <table id="childTable" lay-filter="childTable"></table>
</div>

5.在子页面中，需要根据传入的用户 ID 加载相应的数据。按照步骤 2 和 3，在子页面中添加一条类似于以下的代码实现：

//获取 URL 中的参数值
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var userId = getParameterByName('userId');

layui.use(['layer', 'table'], function(){
    var table = layui.table;
    
    table.render({
        elem: '#table',
        url: 'data.json',
        where: {
            userId: userId
        },
        page: true,
        cols: [[
            {field: 'id', title: 'ID', width:80},
            {field: 'title', title: '标题', width:400},
            {field: 'content', title: '内容', width:200}
        ]]
    });
});

以上就是使用 layui 实现父子页面数据表格的方法。这种实现方式比较通用，在实际项目中也可以根据需要进行一些改进和调整。

iframe父子页面跨域

iframe父子页面跨域问题是指在Web开发中，当一个页面（父页面）中嵌套了另一个页面（子页面）的iframe元素，并且两个页面的域名或协议或端口不一致时，就会出现跨域问题。

由于浏览器的同源策略，子页面无法直接访问父页面的内容，也无法与父页面进行通信。这是为了保护用户隐私和安全。但是，有时候我们可能需要在父子页面之间进行数据交互或调用父页面的方法。

解决跨域问题的常见方法有以下几种：

1. 使用postMessage API：在子页面中使用postMessage方法向父页面发送消息，父页面监听message事件来接收消息。这种方式可以实现跨域通信，但需要在两个页面中编写额外的代码。

2. 设置document.domain：如果两个页面的域名只是在子域名上有差异（例如，父页面为example.com，子页面为sub.example.com），可以在两个页面中都设置document.domain为相同的主域名（例如，example.com）。这样浏览器会认为它们同源，从而解决跨域问题。

3. 使用window.name或location.hash：通过修改window.name或location.hash来传递数据。这种方式可以绕过同源策略限制，但只适用于传递较小的数据量。

4. 使用代理页面：在同源的页面中设置一个代理页面，该代理页面作为中间人，用于转发父子页面之间的数据。

需要根据具体的场景和需求选择适合的解决方案来解决iframe父子页面跨域问题。