layui父类获取子类iframe数据

分手后的思念是犯贱 2022-02-17 03:53 722阅读 0赞

## 需求如下 ##

一个普通的表格页面，需要通过弹窗出现高级搜索iframe页面，高级搜索里面的表单点击搜索按钮，把数据传到父类中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lNYW5peQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lNYW5peQ_size_16_color_FFFFFF_t_70 1]

## 思路一：通过弹窗返回函数拿到数据 ##

*  难点一：需要触发事件 ，高级搜索页面一开始是空的，需要填写数据后，点击搜索按钮。

在弹窗返回函数中监控搜索按钮点击事件。

$("#seach").on("click",function(){ // 搜索弹窗
    	    layer.open({
    			type: 2,
    			title: false,
    			closeBtn: 0,
    			shade:0.5,
    			skin: 'f-r-n',
    			area: ['80%','700px'],
    			content: ['${base}/projcetRepository/advancedSearch.html','no'],
    			 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("#advancedSubmit").click(function (){
                    	console.log("搜索按钮点击到了");
                    
                     })
                    
                 }
    		});
    	});

*  难点二：关闭弹窗

//高级搜索页面内部搜索按钮监听提交
    	 form.on('submit(advancedSubmit)', function(data){
    	
    		 var index = parent.layer.getFrameIndex(window.name);
    		 parent.layer.close(index);//关闭当前页
    		 //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    		 //return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    	});

*  难点三：拿数据

输入框中的值，通过弹窗返回函数中获取页面元素，无法得到输入框输入的值。

## 解决思路二： ##

弹窗返回函数监控搜索按钮点击事件，iframe中也加入搜索按钮监控点击事件。  
通过先把数据放入iframe中的隐藏域中，在弹窗返回函数提出隐藏域内容。  
关键点：两个点击事件有先后顺序，先执行弹窗返回函数中点击事件，再执行iframe中点击事件。  
把数据放入iframe中的隐藏域之前，弹窗返回函数中点击事件就执行了。

#### 失败 ####

## 解决思路三 ##

：  
iframe中点击事件中，获取父类的函数方法，把数据当做参数传给父类body。  
父类js代码

function advanced(data) {
    		option.where.filters = data;
    		mytable.reload(option);
    	}
    	 window.advanced = advanced;

iframe中的js代码

//高级搜索页面内部搜索按钮监听提交
    	 form.on('submit(advancedSubmit)', function(data){
    		
    		//获取父类函数
    		 parent.advanced(params);
    	
    		 var index = parent.layer.getFrameIndex(window.name);
    		 parent.layer.close(index);//关闭当前页
    	
    	});

这个方法有效且实用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lNYW5peQ_size_16_color_FFFFFF_t_70]: /images/20220217/cb3a61d073194428b0219d044d8c0699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lNYW5peQ_size_16_color_FFFFFF_t_70 1]: /images/20220217/5de7e0556278498388d6feabf1a5db59.png