layer框架：子父之间的数据传递

layer是一个轻量级简单实用的弹出框插件，笔者在使用的过称中遇到一个小问题，最后通过网友的帮助终于解决了，记录一下，避免下次再忘了。

场景：点击父页面Table中td下的某一个<a>标签，弹出一个新的子页面，在子页面的input中显示出父页面的内容，其实涉及到一个子父之间的数据传递的问题，解决问题有两种方式，一：在子页面获取父页面的元素；二：在父页面传递元素给子页面，查入到子页面的input中。

第一中方法：

在子页面中通过dom操作拿到父页面的内容。由于笔者的使用场景，使用的是第二种方法。

var order = parent.$("input[name='fruit']:checked").parent().parent().children('td').eq(3).text();//订单

第二中方法：

父页面主动把信息插入到子页面中，代码如下。

var $td1 = $("<td></td>");
	var $a = $("<a></a>").text(data[i].name);
	$a.appendTo($td1);
	$a.click(function(){
		var name = $(this).parent().parent().children('td').eq(1).text();
		var idcard = $(this).parent().parent().children('td').eq(3).text();
			layer.open({
				type: 2,
				area: ['800px', '550px'],
				fixed: false, //不固定
				maxmin: true,
				content: 'iframe_shouquan.html',
				success: function(layero, index){
				var body = layer.getChildFrame('body',index);//建立父子联系
				var iframeWin = window[layero.find('iframe')[0]['name']];
				var inputList = body.find('input');
				$(inputList[0]).val(name);
				$(inputList[1]).val(idcard);
			}
		});
	});

 

参考：https://blog.csdn.net/DOCALLEN/article/details/62050608

博客文章同步在微信公众号：Web小项目

覆盖百万优质粉丝的web项目分享平台；

优质Web项目分享，技术解决方案汇总，开发资料分享，面试资料汇总，互联网公司面试真题，技术博客等专题内容；

扫描下方二维码关注我们，领取项目资料：