반응형
- 부모, 자식 팝업창 간의 함수 호출 및 값 전달하기 -
우선 설명보다는 코드를 먼저 살펴보고 그다음에 설명들어가도록 하겠다.
▶parent.html (부모창)
<!DOCTYPE HTML>
<html>
<head>
<script>
var parent_value = "부모";
// 팝업창 띄우기 함수
function open_popup(){
window.open('child.html','자식창');
}
function call_chlid(){ //부모창에서 자식창에 값 전달
try{
popup.child_value = "자식창 호출";
popup.child_function(); // 자식창 함수 호출
}catch(e){ // 부모 자식간의 연결이 끊어졌을 경우 처리
alert('팝업창을 다시 열어주세요');
}
}
function parent_function(){
alert(parent_value);
}
</script>
</head>
<body>
<input type='button' value='open' onclick='open_popup()' />
<input type='button' value='call' onclick='call_chlid()' />
</body>
</html>
▶child.html (자식창)
<!DOCTYPE HTML>
<html>
<head>
<script>
var child_value = "자식";
function call_parent(){ //부모창에서 자식창에 값 전달
try{
opener.parent_value = "부모창 호출";
opener.parent_function(); // 부모창 함수 호출
}catch(e){ // 부모 자식간의 연결이 끊어졌을 경우 처리
alert('팝업창을 다시 열어주세요');
}
}
function child_function(){
alert(child_value);
}
// opener 로 부모창에 접근하여 popup이라는 자식창 속성을 주입
// (부모창에 popup 변수 선언 안해도 사용 가능)
opener.popup = this;
</script>
</head>
<body>
<input type='button' value='open' onclick='call_parent()' />
</body>
</html>1. 자식창에서 부모창에 있는 변수나 함수등 속성들을 호출하는 방법은 opener 라는것을 통해 쉽게 접근이 가능하다.
2. 부모창에서 자식창을 호출하는 방법은 위 코드에서 사용한것처럼 직접 opener를 통해 자식창 전부를 주입하여 사용하는 방법이 존재한다.
2번 방법을 계속해서 설명하자면 위 자식창에서
// opener 로 부모창에 접근하여 popup이라는 자식창 속성을 주입
// (부모창에 popup 변수 선언 안해도 사용 가능)
opener.popup = this;이 부분을 살펴보면 부모창의 popup 변수에 자식을 주입한것을 볼 수 있다.
여기서 주의할 점은
opener.popup = this; 이 부분을 선언해준 위치에 따라 주입되는 영역이 달라진다.
부모창에서 자식창의 <body>영역에 접근하고자 한다면
위 예제처럼 <head> 스크립트를 영역에 선언하지 말고 <body> 영역이 끝나고 난 뒤 <script>를 선언하여 주입해주면 된다.
그러면 부모창에서 자식창 <body> 영역에 접근이 가능하다.
반응형
댓글