Detailed explanation of layer parent-child page interaction in layui framework-JS Tutorial-php.cn

Detailed explanation of layer parent-child page interaction in layui framework

小云云

Release： 2018-05-11 16:50:40

Original

8676 people have browsed it

This article mainly introduces the method of layer parent-child page interaction in the layui framework. It analyzes the common techniques of layer parent-child page interaction in the form of examples and the operation method of layer popping up multiple iframes to find the parent page. Friends who need it can refer to it. I hope Can help everyone.

The example of this article describes the method of interaction between layer parent and child pages in the layui framework. Share it with everyone for your reference, the details are as follows:

layer is a web elastic layer component that has been popular in recent years. The official website address is: http://layer.layui.com/You can download the latest version from the official website.

When the layer pops up a new window (subpage) as an iframe layer, how to access the elements and functions of the parent page in the subpage.

1. Access parent page element value

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

Copy after login

2. Access parent page method

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

Copy after login

3. How to close the pop-up child page window

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

Copy after login

4 , How to refresh the parent page from the child page

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

Copy after login

Attachment: How to pop up multiple iframes in the layer to find the parent page

Parent page:

function aa(){
    var index = parent.layer.getFrameIndex(window.name);
    var iframeName = &#39;layui-layer-iframe&#39;+index;
    openDialog1(&#39;选择XXX&#39;, &#39;${ctx}/*****,&#39;800px&#39;, &#39;500px&#39;,iframeName);
}
function openDialog1(title,url,width,height,target){
    top.layer.open({
      type: 2,
      area: [width, height],
      title: title,
      maxmin: true, //开启最大化最小化按钮
      content: url ,
      btn: [&#39;确定&#39;, &#39;关闭&#39;],
      yes: function(index, layero){
         var body = top.layer.getChildFrame(&#39;body&#39;, index);
         var iframeWin = layero.find(&#39;iframe&#39;)[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
         var inputForm = body.find(&#39;#inputForm&#39;);
         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);
}

Copy after login

subpage

function doSubmit(iframeName) {
    var sel=$("tbody tr td input.i-checks:checked");
    var size = sel.size();
    if(size==0){
      top.layer.alert(&#39;请至少选择一条数据!&#39;, {icon: 0, title:&#39;警告&#39;});
      return false;
    }else{
      for(var i=0;i<size;i++){
        top.window[iframeName].addRecord(sel[i].name,sel[i].value);
      }
      return true;
    }
}

Copy after login

Related recommendations:

Native js gets the dom elements in the iframe--the method for parent and child pages to get each other's dom elements

Detailed explanation of javascript parent-child page communication examples_javascript skills

Solution to the problem of value-passing in the tree shape in layui

The above is the detailed content of Detailed explanation of layer parent-child page interaction in layui framework. For more information, please follow other related articles on the PHP Chinese website!