레이어는 팝업 레이어를 닫고 상위 인터페이스 기능 구현 방법을 새로 고칩니다.

이 글에서는 주로 팝업 레이어를 닫고 상위 인터페이스를 새로 고치는 레이어 기능을 소개하며, 팝업 레이어를 닫을 때 레이어를 사용하여 상위 인터페이스를 새로 고치는 일반적인 구현 기술과 관련 작업 주의 사항을 예제를 기반으로 분석합니다. . 필요한 친구들이 참고하면 도움이 될 것 같아요.

이 글의 예에서는 팝업 레이어를 닫고 상위 인터페이스를 새로 고치는 레이어 기능을 설명합니다. 참조용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

layer는 최근 몇 년 동안 인기를 끌었던 웹 탄력적 레이어 구성 요소로, 다양한 솔루션을 갖추고 있으며 모든 수준의 개발자에게 서비스를 제공하기 위해 노력하고 있습니다. 편안할 것입니다. 풍부하고 친근한 운영 경험을 가지고 있습니다.

최근 프로젝트에서는 hui 프런트엔드 프레임워크를 사용하고 팝업 레이어는 레이어 플러그인을 사용합니다. 팝업 레이어의 경우 팝업 레이어를 닫는 작업 경험은 누구나 알고 있습니다. 상위 페이지를 새로 고쳐야 합니다. 글을 쓰기 시작하면서 나만의 오해에 빠졌다. 팝업 레이어가 성공적으로 처리된 후 내가 불렀던 것은

var index = parent.layer.getFrameIndex(window.name);
parent.location.href=url;
parent.layer.close(index);

여기에 쓰는 것이 맞지만 이렇게 쓰면 하나만 사용할 수 있습니다. 여러 곳에서 호출되는 경우 원래 주소로 돌아갈 수 없으며 새 URL 주소로 리디렉션됩니다. 그리고 내 프로젝트 도중에 특정 팝업 레이어가 두 곳에서 호출되었으므로 분명히 이 솔루션은 적합하지 않으며 최적화가 필요합니다. Baidu는 살펴보고 다음 두 가지 최적화 솔루션을 찾았습니다.

옵션 1:

레이어 팝업 레이어에서 상위 인터페이스 다시 로드 기능 호출

window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

옵션 2:

레이어 호출 플러그인의 최종 콜백 방법:

end - 레이어가 파괴된 후 트리거되는 콜백

Type: 함수, 기본값: null

레이어가 있는 한 확인인지 취소인지 여부 파괴되면 end는 매개변수 없이 실행됩니다.

상위 창이 레이어 팝업 상자를 열면 종료 콜백을 추가하세요

function openLayer() {
  //iframe层
    parent.layer.open({
      type: 2,
      title: '修改',
      shadeClose: false, //点击遮罩关闭
      shade: 0.8,
      area: ['30%', '45%'],
      maxmin: true,
      closeBtn: 1,
      content: [url, 'yes'], //iframe的url，yes是否有滚动条
      end: function () {
        location.reload();
      }
});

레이어 팝업 상자가 처리된 후 다른 새로 고침 작업 함수를 호출할 필요 없이 바로 닫으면 됩니다

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

이에 비해 작업 논리 측면에서 팝업 상자를 수동으로 닫는 것은 팝업 상자의 처리 논리가 성공적으로 실행되는 경우에만 새로 고침 작업을 트리거해서는 안 되기 때문에 첫 번째 솔루션이 더 좋습니다. 팝업 상자를 닫기 위해 함수가 호출되면 상위 인터페이스 새로 고침 작업이 트리거됩니다. 이 논리에 따라 옵션 1을 선택해야 합니다. 옵션 2는 무슨 일이 있어도 페이지가 새로 고쳐지는데, 이는 실제로 아무 이유 없이 서버의 처리 부담을 증가시킵니다.

옵션 2: 하위 페이지의 처리 결과를 하위 페이지의 상위 페이지로 보내는 문제를 해결할 수 있습니다.

layer.js에 상위 클래스의 팝업 레이어를 닫는 콜백이 있을 때 이전 양식의 제출이 실패하는 문제의 경우:

해결 방법: 인터넷에 많은 것들이 있으며, 일부는 ajax 요청으로 변환되고 데이터 전송이 완료된 후 상위가 닫힙니다. 클래스 팝업 레이어:

상위 팝업 레이어를 닫는 방법은 다음과 같습니다.

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index); // 关闭layer

ajax를 사용하는 것은 괜찮지만, 제가 하고 있는 작업이 결제인데, 결제 페이지를 띄워야 하는데, Ajax로 변환이 안 되네요. 어떻게 도와주세요. 나중에 상사가 "나중에 폐쇄를 실행할 수 없나요?"라고 말했습니다. 시도해 보면 좋을 아이디어입니다.

첨부 코드:

$("#myForm").submit();
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
setTimeout(function () {
  parent.layer.close(index); // 关闭layer
},500);

또한 상위 창을 닫은 후 창을 열어야 합니다. 어떻게 해결해야 할까요? 나중에 레이어.js에 상위 창의 메서드를 호출하는 좋은 방법이 있다는 것을 알았습니다. window.자식 창의 영향을 받지 않습니다. parent.부모 클래스 메서드 이름(매개변수)을 전달하면 됩니다. 부모 창에서 layer.js의 팝업을 호출하면 됩니다.

관련 권장 사항:

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

이미지 표시 기능을 구현하는layui의 레이어 프런트 엔드 구성 요소

jQuery, 열기를 구현하는 레이어 및 팝업 레이어 닫기 기능 예시에 대한 자세한 설명

위 내용은 레이어는 팝업 레이어를 닫고 상위 인터페이스 기능 구현 방법을 새로 고칩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!