Layer組件多個iframe彈出層打開與關閉及參數傳遞

一、Layer簡介

Layer是一款近年來備受青睞的web彈層組件，基於jquery，易用、實用，兼容包括IE6在內的所有主流瀏覽器，擁有豐富強大的可自定義的功能。

Layer官網地址：http://layer.layui.com/

 

二、多個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參數可傳入要打開的頁面，type參數傳2，即可打開iframe類型的彈層

（2）示例二：

layer.open({
  type: 2,
  title: false,
  closeBtn: 0, //不顯示關閉按鈕
  shade: [0],
  area: ['340px', '215px'],
  offset: 'rb', //右下角彈出
  time: 2000, //2秒后自動關閉
  anim: 2,
  content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動條
  end: function(){ //此處用於演示
    layer.open({
      type: 2,
      title: '很多時候，我們想最大化看，比如像這個頁面。',
      shadeClose: true,
      shade: false,
      maxmin: true, //開啟最大化最小化按鈕
      area: ['893px', '600px'],
      content: '//fly.layui.com/'
    });
  }
});

（3）示例三：在彈出層A中打開新彈出層B，與彈出層A同一DOM層級

可根據項目需求，簡單封裝彈出層打開方法,如下：

//在彈出層A(子頁面1)打開新彈出層B(子頁面2)，彈出層A、B在同一DOM層級，即父頁面內有多個iframe，子頁面2不嵌套在子頁面1中；
//在彈出層A(子頁面1)中封裝如下方法，在需要觸發打開新彈出層B事件中執行如下方法；
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.關閉iframe彈出層js代碼

（1）關閉特定iframe

//當在iframe頁面關閉自身時，在iframe頁執行以下js腳本
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
parent.layer.close(index); //再執行關閉 

（2）關閉所有彈出層

如果沒有彈層疊加等復雜邏輯，可根據需要關閉所有彈出層

layer.closeAll(); //瘋狂模式，關閉所有層
layer.closeAll('dialog'); //關閉信息框
layer.closeAll('page'); //關閉所有頁面層
layer.closeAll('iframe'); //關閉所有的iframe層
layer.closeAll('loading'); //關閉加載層
layer.closeAll('tips'); //關閉所有的tips層 

3.刷新另一個彈出層

（1）刷新已知index的iframe彈層

layer.iframeSrc(index, 'http://sentsin.com') //官方示例，其中參數index為iframe索引，第二個參數為iframe的URL，暫未使用過

（2）刷新未知index的iframe彈層

 parent.$("iframe").each(function () {
                                $(this).attr('src', $(this).attr('src'));//需要引用jquery
 })

如果刷新所有iframe不影響，則可以重置所有iframe。在彈層A關閉后，需要刷新彈層B，在彈層A執行以上腳本后關閉當前彈層A；

4.iframe彈出層參數傳遞

（1）父頁面傳參到iframe彈出層

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

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

比如在彈出層A按鈕打開另一個彈出層B，可在layer.open()函數content參數配置中，以URL形式傳參即可,（content:'http://www.baidu.com?id='+100）

<a href="javascript:void(0);" class="a1" 
onclick="openLayerUrl('@domainTeamUrl/Notice/Update?id='+ @Model.Id,876,575);closeLayer()">修改</a>
//在ASP.Net MVC Razor視圖中使用示例，openLayerUrl()為本篇中介紹的打開Layer彈出層的封裝方法，closeLayer()為封裝的關閉layer彈出層的方法；

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

三、多個iframe彈出層（嵌套）

1.彈出層打開與關閉

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

• 在父頁面打開彈出層A，父頁面腳本用layer.open()；
• 在彈出層A打開彈出層B,子頁面2腳本用layer.open()；
• 在彈出層B中關閉彈出層A和B，彈出層B用腳本parent.parent.closeAll()；

2.彈出層傳參

jquery取得父頁面元素：

parent.parent.$("#hideCollectionId").val()；//取得父頁面之父頁面的非動態生成的元素
$("#hideCollectionId",parent.parent.document).val()；//取得父頁面之父頁面的動態生成的元素

附：jquery父頁面與子頁面如何互相訪問元素與方法

（1）jquery在父窗口中獲取iframe中的元素

• Jquery代碼 父窗口中獲取iframe中的非動態生成元素

1. 格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1  
2. 實例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1  

• Jquery代碼  父窗口中獲取iframe中的動態生成元素

1. 格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2  
2. 實例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2  

（2） jquery在iframe中獲取父窗口的元素

1. 格式：$('#父窗口中的元素ID', parent.document).click();  
2. 實例：$('#btnOk', parent.document).click();  

四、不顯示iframe中的滾動條

有時候不想讓iframe彈層出現滾動條，則可以在content參數中傳入一個字符串數組

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
}); 

　更多使用技巧，請移步官網閱讀彈層組件開發文檔

結語

本篇介紹了Layer彈出層組件在多個彈出層場景使用及傳參方法，包括非嵌套彈出層和嵌套彈出層打開與關閉方法。