Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Interaktion zwischen übergeordneten und untergeordneten Ebenenebenen im Laui-Framework

小云云
Freigeben: 2018-05-11 16:50:40
Original
8707 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode der Layer-Eltern-Kind-Seiteninteraktion im Laui-Framework vorgestellt. Er analysiert die gängigen Techniken der Layer-Eltern-Kind-Seiteninteraktion in Form von Beispielen und die Operationsmethode zum Auffinden mehrerer Iframes Ich hoffe, dass Freunde, die es brauchen, darauf verweisen können.

Das Beispiel in diesem Artikel beschreibt die Methode der Interaktion zwischen übergeordneten und untergeordneten Ebenenebenen im Laui-Framework. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Layer ist eine Web-Elastic-Layer-Komponente, die in den letzten Jahren beliebt war. Die offizielle Website-Adresse lautet: http://layer. layui.com/Sie können die neueste Version von der offiziellen Website herunterladen.

Wenn die Ebene ein neues Fenster (Unterseite) als Iframe-Ebene öffnet, erfahren Sie, wie Sie auf der Unterseite auf die Elemente und Funktionen der übergeordneten Seite zugreifen.

1. Greifen Sie auf den übergeordneten Seitenelementwert zu

var parentId=parent.$("#id").val();//访问父页面元素值
Nach dem Login kopieren

2. Greifen Sie auf die übergeordnete Seitenmethode zu

var parentMethodValue=parent.getMethodValue();//访问父页面方法
Nach dem Login kopieren

3. Seitenfenster

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);//关闭弹出的子页面窗口
Nach dem Login kopieren

4. So aktualisieren Sie die übergeordnete Seite von einer untergeordneten Seite

parent.location.reload(); // 父页面刷新
Nach dem Login kopieren

Anhang: So öffnen Sie mehrere Iframes in der Ebene, um die übergeordnete Seite zu finden Seite

Übergeordnete Seite:

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);
}
Nach dem Login kopieren

Unterseite

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;
    }
}
Nach dem Login kopieren

Verwandte Empfehlungen:

Native js ruft das Dom-Element im Iframe ab – die übergeordneten und untergeordneten Seiten erhalten einander Methoden des Dom-Elements der anderen Partei

Detaillierte Erläuterung der JavaScript-Beispiele für die Kommunikation zwischen übergeordneten und untergeordneten Seiten_Javascript-Fähigkeiten

Lösung für das Problem der Wertübergabe in der Baumform in der Laui-Methode

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Interaktion zwischen übergeordneten und untergeordneten Ebenenebenen im Laui-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage