[Javascript/jQuery] 팝업창(자식창)에서 부모창 url 얻기

 안녕하세요 코북입니다. 한 달에 한 번씩 글을 쓰는 것 같네요^^.. 시간이 왜 이렇게 빠른지.. 배포 한 번 할 때마다 한 달이 지나가 있는 것 같아요.. 또 사람이 일만 할 수는 없잖아요ㅠㅋㅋㅋㅋ 놀기도 해야 하고^^... 바쁘네요ㅎㅎㅎㅎㅎ 아무튼 오늘은 팝업창을 띄웠을 경우 javascript로 자식 창(팝업창)에서 부모 창에 어떻게 접근할 수 있는지 공부했습니다.

 

 

1.

$(function () {
    try {
        // window.opener가 없을 수도 있음 -> try/catch 처리
        if (window.opener.location.href.indexOf("type=1") > -1) {
            $('#id_a').parent().css("display", "none");
            $('#id_b').parent().css("display", "none");
        }
    } catch {}
});

 위에 있는 스크립트는 자식 창의 스크립트입니다. 먼저 자식 창에서 부모 창의 정보를 얻기 위해서 window.opener 객체를  사용하였습니다. 부모 창 정보 중 url 전체의 정보가 필요했기 때문에 location객체의 href 속성을 사용했습니다. url에 type=1이라는 값이 있을 경우 id_a와 id_b라는 id값을 가진 태그의 부모의 css 속성을 변경해줬습니다.

 

 

 

2.

 또한 부모 창과 자식 창은 서로 값을 주고받을 수 있습니다.

 

부모 창 script

const childOpenWindow;

// 자식 창 오픈
function openWindow() {
	window.name = 'parentForm';
	childOpenWindow = window.open(url, windowName, [windowFeatures]);
}

// 자식에게 값 전달
function sendChildText() {
	childOpenWindow.document.getElementById("text").value = document.getElementById("text").value; 
}

 

 

자식 창 script

// 부모창에 값 전달
function setParentText() {
	window.opener.document.getElementById("text").value = document.getElementById("text").value;
}

// 부모창의 값 조회
function getParentText() {
	document.getElementById("text").value = window.opener.document.getElementById("text").value;
}

// 부모창 새로고침
function reloadParent() {
	window.opener.document.reload();
	// opener.parent.location=’부모창주소(원하는주소)’;
	window.close(); // 종료
}

 

 

 

 

출처 및 참고

https://moonsiri.tistory.com/100