Layer組件多個(gè)iframe彈出層打開(kāi)與關(guān)閉及參數(shù)傳遞的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹了Layer組件多個(gè)iframe彈出層打開(kāi)與關(guān)閉及參數(shù)傳遞的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了白城免費(fèi)建站歡迎大家使用！

一、Layer簡(jiǎn)介

Layer是一款近年來(lái)備受青睞的web彈層組件，基于jquery，易用、實(shí)用，兼容包括IE6在內(nèi)的所有主流瀏覽器，擁有豐富強(qiáng)大的可自定義的功能。

Layer官網(wǎng)地址：http://layer.layui.com/

二、多個(gè)iframe彈出層（非嵌套）

1.打開(kāi)iframe彈出層js代碼

（1）示例一：

layer.open({
type: 2,
 
title: 'layer mobile頁(yè)',
 
shadeClose: true,
 
shade: 0.8,
 
area: ['380px', '90%'],
 
content: 'mobile/' //iframe的url
 
});

content參數(shù)可傳入要打開(kāi)的頁(yè)面，type參數(shù)傳2，即可打開(kāi)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è)頁(yè)面。',
  shadeClose: true,
  shade: false,
  maxmin: true, //開(kāi)啟大化最小化按鈕
  area: ['893px', '600px'],
  content: '//fly.layui.com/'
 });
 }
});

（3）示例三：在彈出層A中打開(kāi)新彈出層B，與彈出層A同一DOM層級(jí)

可根據(jù)項(xiàng)目需求，簡(jiǎn)單封裝彈出層打開(kāi)方法,如下：

//在彈出層A(子頁(yè)面1)打開(kāi)新彈出層B(子頁(yè)面2)，彈出層A、B在同一DOM層級(jí)，即父頁(yè)面內(nèi)有多個(gè)iframe，子頁(yè)面2不嵌套在子頁(yè)面1中；<br>//在彈出層A(子頁(yè)面1)中封裝如下方法，在需要觸發(fā)打開(kāi)新彈出層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頁(yè)面關(guān)閉自身時(shí)，在iframe頁(yè)執(zhí)行以下js腳本
var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引
parent.layer.close(index); //再執(zhí)行關(guān)閉

（2）關(guān)閉所有彈出層

如果沒(méi)有彈層疊加等復(fù)雜邏輯，可根據(jù)需要關(guān)閉所有彈出層

layer.closeAll(); //瘋狂模式，關(guān)閉所有層
layer.closeAll('dialog'); //關(guān)閉信息框
layer.closeAll('page'); //關(guān)閉所有頁(yè)面層
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，暫未使用過(guò)

（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）父頁(yè)面?zhèn)鲄⒌絠frame彈出層

var collectionId = parent.$("#hideCollectionId").val();//可在父頁(yè)面定義隱藏域，id為hideCollectionId，需要引用jquery

（2）iframe彈出層A傳參到iframe彈出層B

比如在彈出層A按鈕打開(kāi)另一個(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()為本篇中介紹的打開(kāi)Layer彈出層的封裝方法，closeLayer()為封裝的關(guān)閉layer彈出層的方法；

也可以考慮使用success（彈出后回調(diào)）、end（銷毀后回調(diào)）、cancel(關(guān)閉回調(diào))等參數(shù)配置中做其他工作；　　

三、多個(gè)iframe彈出層（嵌套）

1.彈出層打開(kāi)與關(guān)閉

如果使用嵌套的iframe也是可以的，如iframe彈出層B（子頁(yè)面2）嵌套在iframe彈出層A（子頁(yè)面1）中，iframe彈出層A嵌套在父頁(yè)面中，

在父頁(yè)面打開(kāi)彈出層A，父頁(yè)面腳本用layer.open()；

在彈出層A打開(kāi)彈出層B,子頁(yè)面2腳本用layer.open()；

在彈出層B中關(guān)閉彈出層A和B，彈出層B用腳本parent.parent.closeAll()；

2.彈出層傳參

jquery取得父頁(yè)面元素：

parent.parent.$("#hideCollectionId").val()；//取得父頁(yè)面之父頁(yè)面的非動(dòng)態(tài)生成的元素
$("#hideCollectionId",parent.parent.document).val()；//取得父頁(yè)面之父頁(yè)面的動(dòng)態(tài)生成的元素

附：jquery父頁(yè)面與子頁(yè)面如何互相訪問(wèn)元素與方法

（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彈出層打開(kāi)與關(guān)閉及參數(shù)傳遞的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章名稱：Layer組件多個(gè)iframe彈出層打開(kāi)與關(guān)閉及參數(shù)傳遞的示例分析-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://bm7419.com/article46/diddeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、域名注冊(cè)、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)