Layui 프레임워크의 레이어 상위-하위 페이지 상호작용에 대한 자세한 설명

이 글에서는 주로 Layui 프레임워크에서 레이어 상위-하위 페이지 상호 작용 방법을 예제 형식으로 분석하고 레이어가 여러 iframe을 팝업하여 상위를 찾는 작업 방법을 분석합니다. 페이지가 필요하신 분들은 참고하시면 도움이 될 것 같습니다.

이 문서의 예에서는layui 프레임워크에서 레이어 상위 페이지와 하위 페이지 간의 상호 작용 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

layer는 최근 몇 년 동안 인기를 끌고 있는 웹 탄력적 레이어 구성 요소입니다. 공식 웹사이트 주소는 http://layer.layui.com/You입니다. 공식 웹사이트에서 최신 버전을 다운로드할 수 있습니다.

레이어가 iframe 레이어로 새 창(하위 페이지)을 표시할 때 하위 페이지에서 상위 페이지의 요소 및 기능에 액세스하는 방법.

1. 상위 페이지 요소 값에 액세스

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

2. 상위 페이지 메소드에 액세스

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

3. 팝업 하위 페이지 창을 닫는 방법

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

4.

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

첨부 파일: 상위 페이지를 찾기 위해 레이어에서 여러 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;
    }
}

관련 권장 사항:

iframe에서 dom 요소를 가져오는 기본 js-- 부모와 자식 페이지가 서로의 DOM 요소를 가져오는 방법

javascript 부모-자식 페이지 통신에 대한 자세한 설명 example_javascript 기술

layui에서 트리 모양의 값 전달 문제에 대한 솔루션

위 내용은 Layui 프레임워크의 레이어 상위-하위 페이지 상호작용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!