layer组件父子页面相互传递数据

比眉伴天荒 2021-09-19 15:44 1191阅读 0赞

# layer组件父子页面相互传递数据 #

layer 是一款功能强大的web弹出层组件，很多时候我们需要使用它弹出各种各样的信息
    	很多情况它都能胜任，比如简单的msg文本，tips提示，loading加载等。
    	但是对于功能更强大的弹出页面和iframe,在需要在父子页面之间传递数据的时候，
    	学习和使用起来就不是那么简单了。
      		本文主要记录了在使用layer组件进行父子传值时的一下方法和个人遇到的错误总结。

## 父传子 ##

在此之前需要对layer有一定的了解。在此不再啰嗦！下面的例子都是夫页面利用layer打开iframe弹窗，即`layer.open ({type:2})`  
废话不多说，先上运行成功的代码

layer.open({
    			  type: 2
    			  ,title: '详细'
    			  ,content: 'layerWindow/detail.html'  //需要打开的页面链接
    			  ,maxmin: true
    			  ,area: ['500px', '450px'],
    				success: function(layero, index){
              			  var body = layer.getChildFrame('body',index);//建立父子联系【核心语句】
             				  var iframeWin = window[layero.find('iframe')[0]['name']];//【核心句】
    						// iframeWin.method();   //这句话的意思是可以通过ifarmeWin调用子页面的方法
    						//		console.log(body.html()) //得到iframe页的body内容
    						//		body.find('input').val('Hi，我是从父页来的')
    						var inputList = body.find('input');     //取得子页面中input输入框
    						//var dataLists= [1000,11111,11,1333,1,1,1,1,1,1,1,1,1,11,,11,1,1];测试数组
    						 for(var j = 0; j< inputList.length; j++){			//把父页面的数据放到子页面的input框中
                    				body.find(inputList[j]).val(dataLists[j]);
               				 }
    				}
    			});

核心的代码就是上面这些。现在来看一下效果：  
![在这里插入图片描述][20190528181623884.png]  
这是父页面的表格([https://img-blog.csdnimg.cn/20190528181518571.png][https_img-blog.csdnimg.cn_20190528181518571.png])  
当我点击详细栏里面的图标时，使用layer弹出详细信息。  
![详细信息][20190528181818872.png]  
可以看到这时数据已经从表格里面传递到了layer弹出窗口的表单中。说明父传子传递成功。（如果没有真实数据的可以用我注释掉的模拟数据，那么这时表单中显示的可能就是那一串数字）

## 父 传子的总结 ##

1.  核心：**var body = layer.getChildFrame(‘body’,index);**//建立父子联系【核心语句】  
    建立父子关系，就是将当前父页面和即将弹出的子页面关联起来。建立一个指向关系。就是建立一个对应关系，指明父子双方到底是谁。
2.  **body.find** 通过body.find查找子页面中的元素。在我的子页面中只有input输入框，因此是body.find（‘input’）。
3.  **body.find(input).val(‘some value’);** 通过这条语句设置input 输入框中的值。这样当打开子页面的时候会发现子页面的输入框已经有值了。  
    那么以上三点就是我对父传子的理解或者说注释。（我也是刚上手，不知道这样理解是否正确，所以暂且这样解释吧）

## 子传父 ##

首先上代码：  
这是父页面代码

layer.open({
    								type: 2
    								,title: '组织目录'
    								,content: 'LayerWindows/OrgTree.html'
    								,maxmin: true
    								,offset: 't'
    								,area: ['500px', '420px']
    								,btn: ['选择', '取消']
    								,yes: function(index, layero){
    									var body = layer.getChildFrame('body',index);//建立父子联系【核心】
    									var iframeWin = window[layero.find('iframe')[0]['name']];//【核心】
    									var v = iframeWin.get();    //调用子页面的方法
    									$("#section").val(v);         //设置父页面元素中的值
    									console.log(v);
    									layer.close(index);			//手动关闭弹出层
    									// submit.trigger('click');
    								}
    							});

在这里我是通过父页面调用子页面的方法实现参数传递，因此在子页面中还需要定义上面代码中调用的get()方法。  
这是子页面代码：

function get(){
    	//nodeId = 'hahahha';    //测试数据
    		return nodeId ;
    	}

上面的代码通过get()返回了一个数据  
下面是程序结果：  
![子页面中选中数据][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70]  
子页面中选中数据，点击选择，关闭弹层。在父页面中显示选择结果。  
![父页面结果][20190528183715285.png]  
父页面中显示选择的结果。可以看到参数传递成功，如果使用测试数据，那么输入框中将显示hahaha。

## 子传父总结 ##

1.  **var iframeWin = window\[layero.find(‘iframe’)\[0\]\[‘name’\]\]**;//【核心】这个是父页面调用子页面方法的核心。这条语句可以这样理解（暂且不管对错）取得子页面的全局对象Window将其保存到iframeWin中。这样我们在父页面中使用iframeWin，就等价与在子页面中使用window。作用就想我们常见的 var taht = this;
2.  **iframeWin.method();** 有了上面的理解，那么在父页面总调用子页面的方法其实就是在父页中调用子页面的全局函数。

## 总结 ##

关于layer传递数据的方法和博文相当的多，但是很多对于向我这样的初学者理解起来有一定的困难。尤其是官方文档更是没有解释清楚。上面这些是我最近使用layer传递数据的一些个人见解和注释，希望能够帮到向我这样的初学者理解程序的实现过程和原理。

[20190528181623884.png]: /images/20210726/141b2e5e28d2428ca904c77d1528a223.png
[https_img-blog.csdnimg.cn_20190528181518571.png]: https://img-blog.csdnimg.cn/20190528181518571.png
[20190528181818872.png]: /images/20210726/b817e5e3cefa48f896c75a2bc45413ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70]: /images/20210726/b8c11fb5936a4445b1257ebdf2a3a499.png
[20190528183715285.png]: /images/20210726/0e2d1eff6b554b828bbefa19c1c1a8df.png