layer弹层组件开发文档 - Layuihttps://www.layui.site/doc/modules/layer.html#layer.getChildFrame

需求及代码分析

 如上图，原来是点击一个按钮跳转到子页面，现在想改为：点击按钮，在当前页打开。因为不想要重写子页面的样式及内容，所以就用到了 layui 的 iframe 层弹框，直接在当前页引用子页面：

/!*如果是iframe层*/
layer.open({type: 2, content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 

按照原先的样式结构及逻辑，“修改”按钮是放在子页面的，现在放到弹框里。这就导致原先在子页面完成修改操作，现在要在父页面的弹框点击“修改”按钮，获取子页面的内容，再进行提交。

layer.open({type: 2,content: 'test/iframe.html',success: function(layero, index){var body = layer.getChildFrame('body', index);var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();console.log(body.html()) //得到iframe页的body内容body.find('input').val('Hi，我是从父页来的')}
});     

通过官方文档，可以了解到 ： 

1. var body = layer.getChildFrame('body', index);
   var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

   iframeWin.子页面方法，父页面执行iframe页的方法。

2. body.html，得到iframe页的body内容。

3. body.find('input')，父页面获取子页面DOM元素。

---

代码：

// 监听工具条（修改）
table.on('tool(table)', function(obj){var data = obj.data;if(obj.event === 'search-tag') {console.log("查看大图",data);} else if (obj.event === 'impower'){var problemDesc = data.problemDesc ? encodeURIComponent(data.problemDesc): "";var str = "?logId="+data.logId+"&problemDesc="+problemDesc;	//传给子页面的参数layer.open({type: 2, content: '子页面相对地址'+str //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'],area: ['1000px', '620px'],btn: ['修改', '取消'],yes: function(index, layero){//获得弹出层iframevar body = layer.getChildFrame('body', index);// console.log(body.html()) //得到iframe页的body内容var problemDesc = []; //选中的复选框body.find(".cycleBox input[type='checkbox']:checked").each(function(){problemDesc.push(Number($(this).val()));});var whereData = {logId: data.logId,problemDesc: problemDesc,qr: body.find(".cycleBox .qr").val(),cannedDate: body.find(".cycleBox .cannedDate").val(),lotId: body.find(".cycleBox .lotId").val()}upDateProblem(whereData, index); //调用修改接口}});}
});

---

参考：

https://www.jb51.net/article/145817.htmhttps://www.jb51.net/article/145817.htm