【layui】【jquery】通過layero獲取iframe的元素

 

$(layero).find('iframe').contents().find('#jqGridY');


獲取window對象

$(layero).find('iframe')[0].contentWindow

//得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();

1. var form = $(layero).find("iframe").contents().find("#file-form");//獲取子頁面元素

    

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

   當你試圖在當前頁獲取iframe頁的DOM元素時，你可以用此方法。selector即iframe頁的選擇器

   layer.open({
   type: 2,
   content: 'test/iframe.html',
   success: function(layero, index){
   var body = layer.getChildFrame('body', index);
   var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();
   console.log(body.html()) //得到iframe頁的body內容
   body.find('input').val('Hi，我是從父頁來的')
   }
   });

    

   通過layer彈出的ifram。想要獲取里面的元素並且綁定相應的事件。

   以前一直不知道layero是什么意思。

   可以通過下面的代碼自己體會一下

   1. 1. layer.open({
      2.  
         type: 2,
      3.  
             title: '文件管理',
      4.  
             shadeClose: true,
      5.  
             shade: 0.8,
      6.  
             area: ['70%', '60%'],
      7.  
             content: url+"?path="+path //iframe的url
      8.  
             , btn: ['確定', '全選', '反選','重置']
      9.  
         , btn2: function(index, layero){
      10.  
                //按鈕【按鈕二】的回調
      11.  
                var form = $(layero).find("iframe").contents().find("#file-form");//獲取子頁面元素
      12.  
                //使用#id就可以獲取到彈出層里面的子元素。前面的寫法都是固定的。
      13.  
          form.find( ":checkbox").prop("checked", true);
      14.  
           
      15.  
                return false //開啟該代碼可禁止點擊該按鈕關閉
      16.  
              }
      17.  
           
      18.  
          });

       

      當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找到父頁面的方法

      父頁面：

      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);
      }

       

       子頁面

      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;
      }
      }

       

      自己總結的一個很好的例子：

      
      layer.open({
      type: 1,
      area: ['600px', '360px'],
      shadeClose: true, //點擊遮罩關閉
      content: '\<\div id="aaa" style="padding:20px;">自定義內容\<\/div>',
      success: function(layero, index){
      alert(layero.find("#aaa").text());
      }

      });

       

       

       

       

   layer.getFrameIndex(windowName) - 獲取特定iframe層的索引

    layer.getFrameIndex(windowName) - 獲取特定iframe層的索引

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

   / / 假設這是iframe頁

   var index  =  parent.layer.getFrameIndex(window.name);  / / 先得到當前iframe層的索引

    

   parent.layer.close(index);  / / 再執行關閉

    layer.getFrameIndex(windowName) - 獲取特定iframe層的索引