IT/development

[JavaScript] 자식 팝업창에서 부모창의 함수 호출(javascript 위주)

알 수 없는 사용자 2023. 8. 13. 20:45
반응형

부모창에서 자식창을 아래처럼 팝업으로 열었음(html 코드는 생략)

parent.html

//버튼 클릭 시 child라는 팝업 호출
$("#btn").on("click", function() {
        //팝업 호출(openPopUp()이라는 공통함수에서는 팝업 호출한다고 가정)
        const popup = openPopUp("/child", 1100, 700, "child");
    });
    
//자식 팝업에서 호출하는 함수(자식창에서 넘어온 사업자번호, 고객명을 부모의 필드에 적용)    
function chooseClient(clientBizNo, clientNm) {
      $("#clientBizNo").val(clientBizNo);
      $("#projClientNm").val(clientNm);
    }

child.html

/**
 * 고객 목록에서 고객명 선택 시 부모창의 chooseClient() 호출 후 팝업 창 닫기
 * @param clientBizNo
 * @param clientNm
 */
function onSelectClient(clientBizNo, clientNm) {
    // window.opener를 사용하여 부모 창의 chooseClient 함수 호출
    window.opener.chooseClient(clientBizNo, clientNm);
    window.close(); // 팝업 창 닫기
}

//table tr에 마우스 오버 시 색상 표시, 마우스 오버 해제 시 색상 해제
$(document).on("mouseenter mouseleave", "#clientTr", function() {
  $(this).css("background-color", isHovered ? "" : "#F7BE6D");
  isHovered = !isHovered;
});

부모창에서 자식 팝업을 열고 자식 팝업에서 선택한 고객명 선택 시 사업자번호, 고객명을 부모창의 함수로 넘기고

부모창에서 넘어온 값을 필드에 세팅하는 예제

반응형