您好,登錄后才能下訂單哦!
這篇文章主要介紹了Layer組件多個(gè)iframe彈出層打開與關(guān)閉及參數(shù)傳遞的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
一、Layer簡介
Layer是一款近年來備受青睞的web彈層組件,基于jquery,易用、實(shí)用,兼容包括IE6在內(nèi)的所有主流瀏覽器,擁有豐富強(qiáng)大的可自定義的功能。
Layer官網(wǎng)地址:http://layer.layui.com/
二、多個(gè)iframe彈出層(非嵌套)
1.打開iframe彈出層js代碼
(1)示例一:
layer.open({ type: 2, title: 'layer mobile頁', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: 'mobile/' //iframe的url });
content參數(shù)可傳入要打開的頁面,type參數(shù)傳2,即可打開iframe類型的彈層
(2)示例二:
layer.open({ type: 2, title: false, closeBtn: 0, //不顯示關(guān)閉按鈕 shade: [0], area: ['340px', '215px'], offset: 'rb', //右下角彈出 time: 2000, //2秒后自動(dòng)關(guān)閉 anim: 2, content: ['test/guodu.html', 'no'], //iframe的url,no代表不顯示滾動(dòng)條 end: function(){ //此處用于演示 layer.open({ type: 2, title: '很多時(shí)候,我們想最大化看,比如像這個(gè)頁面。', shadeClose: true, shade: false, maxmin: true, //開啟最大化最小化按鈕 area: ['893px', '600px'], content: '//fly.layui.com/' }); } });
(3)示例三:在彈出層A中打開新彈出層B,與彈出層A同一DOM層級(jí)
可根據(jù)項(xiàng)目需求,簡單封裝彈出層打開方法,如下:
//在彈出層A(子頁面1)打開新彈出層B(子頁面2),彈出層A、B在同一DOM層級(jí),即父頁面內(nèi)有多個(gè)iframe,子頁面2不嵌套在子頁面1中;<br>//在彈出層A(子頁面1)中封裝如下方法,在需要觸發(fā)打開新彈出層B事件中執(zhí)行如下方法; function openLayerUrl(url, width, height) { parent.layer.open({ type: 2, title: false, closeBtn: false, shadeClose: false, shade: 0.6, border: [0], area: [width <= 0 ? "auto" : width + 'px', height <= 0 ? "auto" : height + 'px'], content: url, }) }
2.關(guān)閉iframe彈出層js代碼
(1)關(guān)閉特定iframe
//當(dāng)在iframe頁面關(guān)閉自身時(shí),在iframe頁執(zhí)行以下js腳本 var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引 parent.layer.close(index); //再執(zhí)行關(guān)閉
(2)關(guān)閉所有彈出層
如果沒有彈層疊加等復(fù)雜邏輯,可根據(jù)需要關(guān)閉所有彈出層
layer.closeAll(); //瘋狂模式,關(guān)閉所有層 layer.closeAll('dialog'); //關(guān)閉信息框 layer.closeAll('page'); //關(guān)閉所有頁面層 layer.closeAll('iframe'); //關(guān)閉所有的iframe層 layer.closeAll('loading'); //關(guān)閉加載層 layer.closeAll('tips'); //關(guān)閉所有的tips層
3.刷新另一個(gè)彈出層
(1)刷新已知index的iframe彈層
layer.iframeSrc(index, 'http://sentsin.com') //官方示例,其中參數(shù)index為iframe索引,第二個(gè)參數(shù)為iframe的URL,暫未使用過
(2)刷新未知index的iframe彈層
parent.$("iframe").each(function () { $(this).attr('src', $(this).attr('src'));//需要引用jquery })
如果刷新所有iframe不影響,則可以重置所有iframe。在彈層A關(guān)閉后,需要刷新彈層B,在彈層A執(zhí)行以上腳本后關(guān)閉當(dāng)前彈層A;
4.iframe彈出層參數(shù)傳遞
(1)父頁面?zhèn)鲄⒌絠frame彈出層
var collectionId = parent.$("#hideCollectionId").val();//可在父頁面定義隱藏域,id為hideCollectionId,需要引用jquery
(2)iframe彈出層A傳參到iframe彈出層B
比如在彈出層A按鈕打開另一個(gè)彈出層B,可在layer.open()函數(shù)content參數(shù)配置中,以URL形式傳參即可,(content:'http://www.baidu.com?id='+100)
<a href="javascript:void(0);" rel="external nofollow" class="a1" <br>οnclick="openLayerUrl('@domainTeamUrl/Notice/Update?id='+ @Model.Id,876,575);closeLayer()">修改</a><br>//在ASP.Net MVC Razor視圖中使用示例,openLayerUrl()為本篇中介紹的打開Layer彈出層的封裝方法,closeLayer()為封裝的關(guān)閉layer彈出層的方法;
也可以考慮使用success(彈出后回調(diào))、end(銷毀后回調(diào))、cancel(關(guān)閉回調(diào))等參數(shù)配置中做其他工作;
三、多個(gè)iframe彈出層(嵌套)
1.彈出層打開與關(guān)閉
如果使用嵌套的iframe也是可以的,如iframe彈出層B(子頁面2)嵌套在iframe彈出層A(子頁面1)中,iframe彈出層A嵌套在父頁面中,
在父頁面打開彈出層A,父頁面腳本用layer.open();
在彈出層A打開彈出層B,子頁面2腳本用layer.open();
在彈出層B中關(guān)閉彈出層A和B,彈出層B用腳本parent.parent.closeAll();
2.彈出層傳參
jquery取得父頁面元素:
parent.parent.$("#hideCollectionId").val();//取得父頁面之父頁面的非動(dòng)態(tài)生成的元素 $("#hideCollectionId",parent.parent.document).val();//取得父頁面之父頁面的動(dòng)態(tài)生成的元素
附:jquery父頁面與子頁面如何互相訪問元素與方法
(1)jquery在父窗口中獲取iframe中的元素
Jquery代碼 父窗口中獲取iframe中的非動(dòng)態(tài)生成元素
格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
實(shí)例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1
Jquery代碼 父窗口中獲取iframe中的動(dòng)態(tài)生成元素
格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
實(shí)例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2
(2) jquery在iframe中獲取父窗口的元素
格式:$('#父窗口中的元素ID', parent.document).click();
實(shí)例:$('#btnOk', parent.document).click();
四、不顯示iframe中的滾動(dòng)條
有時(shí)候不想讓iframe彈層出現(xiàn)滾動(dòng)條,則可以在content參數(shù)中傳入一個(gè)字符串?dāng)?shù)組
layer.open({ type: 2, content: 'http://sentsin.com' //這里content是一個(gè)URL,如果你不想讓iframe出現(xiàn)滾動(dòng)條,你還可以content: ['http://sentsin.com', 'no'] });
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Layer組件多個(gè)iframe彈出層打開與關(guān)閉及參數(shù)傳遞的示例分析”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。