Explication détaillée de l'interaction de la couche parent-enfant dans le cadre layui

Cet article présente principalement la méthode d'interaction de couche parent-enfant dans le framework layui. Il analyse les techniques courantes d'interaction de couche parent-enfant sous forme d'exemples et la méthode de fonctionnement de la couche faisant apparaître plusieurs iframes pour trouver. la page parent. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit la méthode d'interaction entre les pages parents et enfants des couches dans le framework layui. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

layer est un composant de couche élastique Web qui a été populaire ces dernières années. L'adresse officielle du site Web est : http://layer. layui.com/Vous pouvez télécharger la dernière version sur le site officiel.

Lorsque le calque ouvre une nouvelle fenêtre (sous-page) en tant que calque iframe, comment accéder aux éléments et fonctions de la page parent dans la sous-page.

1. Accédez à la valeur de l'élément de la page parent

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

2. Accédez à la méthode de la page parent

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

3. fenêtre de page

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

4. Comment actualiser la page parent à partir d'une page enfant

parent.location.reload(); // 父页面刷新

Pièce jointe : Comment faire apparaître plusieurs iframes dans le calque pour trouver le parent page

Page parent :

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

Sous-page

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

Recommandations associées :

Natif js obtient l'élément dom dans l'iframe - les pages parent et enfant s'échangent Méthodes de l'élément dom de l'autre partie

Explication détaillée des exemples de communication de page parent-enfant javascript_compétences javascript

Solution au problème du passage de valeur dans la forme de l'arbre dans la méthode layui

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!