layer在多層嵌套的iframe頁面中關閉打開的layer彈出框的問題

layer父子層之間的常用操作

訪問父頁面的方法或者值的方法

訪問父頁面元素值

var parentId=parent.$("#id").val();//

訪問父頁面方法 

var parentMethodValue=parent.getMethodValue();//

關閉彈出層的問題

大概分成以下三種情況:

對應當前頁面的某個彈出層

var index=layer.open();

var index=layer.alert();

var index=layer.load();

var index=layer.tips();

這樣彈出的層都有對應的索引,需要關閉他們的時候直接關閉對應的層即可:layer.close(index);

如果是關閉最新的彈出層的時候

layer.close(layer.index)  它獲取的始終是最新彈出的某個層,值是由layer內部動態遞增計算的

 

如果在子窗口中彈出對應的layer層時候,如要關閉的時候一般採用如下方法

在iframe頁面關閉自身時

var index=parent.layer.getFrameIndex(windown.name);

parent.layer.close(index);

此方法一般用於在iframe頁關閉自身時用到

//假設這是iframe頁
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
parent.layer.close(index); //再執行關閉 


在實際項目中碰到如下情況

A-父iframe  b-子iframe 在b中需要打開一個新的彈出層

top.layer.open({
                    type: 2,//這就是定義窗口類型的屬性
                    title: '客服登錄',
                    shadeClose: true,
                    shade: 0.3,
                    offset: "20%",
                    shadeClose : false,
                    area: ['60%','60%'],
                    content: res.data
                });

var index = parent.layer.getFrameIndex(window.name);
 top.layer.close(index);

 

關閉彈出層的子頁面窗口

var index = parent.layer.getFrameIndex(window.name); //獲取窗口索引 

parent.layer.close(index);//關閉彈出的子頁面窗口

在子頁面刷新父頁面

parent.location.reload(); // 父頁面刷新

 

二 父子層之間傳值,傳參

父子層之間傳值傳參的核心方法爲:

layer.getChildFrame(selector, index) - 獲取iframe頁的DOM

其中,selector爲iframe頁面的選擇器,用來選中iframe頁面的元素。Index爲層的索引。

1 在父頁面上完成對子頁面的數據渲染

在layer彈出層成功夠,會回調success方法,重寫該方法即可實現對子頁面的數據渲染。

Layer.open(

{

success:function(layero, index){

Var body = layer.getChildFrame(“body”,index);//綁定父子之間的關係,用於數據傳遞,缺少則無法傳遞

var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象

//獲取子頁面的元素,進行數據渲染

}

})

2 在子頁面完成數據渲染


Layer.open(

{

success: function(layero, index){

Var body = layer.getChildFrame(“body”,index);//綁定父子之間的關係,用於數據傳遞,缺少則無法傳遞

var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe頁的窗口對象

//調用子頁面的方法,將父頁面的值作爲參數傳遞過去

iframeWin.method(pre);

}

})


 


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章