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