> 웹 프론트엔드 > JS 튜토리얼 > Layui 프레임워크의 레이어 상위-하위 페이지 상호작용에 대한 자세한 설명

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

小云云
풀어 주다: 2018-05-11 16:50:40
원래의
8713명이 탐색했습니다.

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿