本文實例講述了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完整源碼可點擊此處本站下載。