本文实例讲述了layui框架中layer父子页面交互的方法。分享给大家供大家参考，具体如下：
layer是一款近年来备受青睐的web弹层组件，官网地址是：http://layer.layui.com/
可以从官网上下载最新版本。
还可点击此处本站下载。
当layer以iframe层的方式弹出新的窗口（子页面），如何在子页面中访问父页面的元素和函数。
1、访问父页面元素值
|
1
|
var
parentId=parent.$(
"#id"
).val();
//访问父页面元素值
|
2、访问父页面方法
|
1
|
var
parentMethodValue=parent.getMethodValue();
//访问父页面方法
|
3、如何关闭弹出的子页面窗口
|
1
2
|
var
index = parent.layer.getFrameIndex(window.name);
//获取窗口索引
parent.layer.close(index);
//关闭弹出的子页面窗口
|
4、如何从子页面执行刷新父页面操作
|
1
|
parent.location.reload();
// 父页面刷新
|
附：layer弹出多个iframe找到父页面的方法
父页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
function
aa(){
var
index = parent.layer.getFrameIndex(window.name);
var
iframeName =
'layui-layer-iframe'
+index;
openDialog1(
'选择XXX'
,
'${ctx}/*****,'
800px
', '
500px
',iframeName);
}
function openDialog1(title,url,width,height,target){
top.layer.open({
type: 2,
area: [width, height],
title: title,
maxmin: true, //开启最大化最小化按钮
content: url ,
btn: ['
确定
', '
关闭
'],
yes: function(index, layero){
var body = top.layer.getChildFrame('
body
', index);
var iframeWin = layero.find('
iframe
')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
var inputForm = body.find('
#inputForm');
var
top_iframe;
if
(target){
top_iframe = target;
//如果指定了iframe，则在改frame中跳转
}
else
{
top_iframe = top.getActiveTab().attr(
"name"
);
//获取当前active的tab的iframe
}
inputForm.attr(
"target"
,top_iframe);
//表单提交成功后，从服务器返回的url在当前tab中展示
if
(iframeWin.contentWindow.doSubmit(top_iframe) ){
top.layer.close(index);
//关闭对话框。
top.window[iframeName].frames.location.reload();
//刷新父亲
}
},
cancel:
function
(index){
}
});
}
//子页面回调方法
function
addRecord(name,chainName){
alert(name);
}
|
子页面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function
doSubmit(iframeName) {
var
sel=$(
"tbody tr td input.i-checks:checked"
);
var
size = sel.size();
if
(size==0){
top.layer.alert(
'请至少选择一条数据!'
, {icon: 0, title:
'警告'
});
return
false
;
}
else
{
for
(
var
i=0;i<size;i++){
top.window[iframeName].addRecord(sel[i].name,sel[i].value);
}
return
true
;
}
}
|
另：layui完整源码可点击此处本站下载。