layui 父页面弹框中获取子页面的内容

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){
					//获得弹出层iframe
					var 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