[Jquery] 부모창 제어/접근

jQuery 팝업창에서 부모창으로 값을 전달해야 할 때 사용하는 방법이다.

=== 부모창 ===

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language='javascript'>
$(document).ready(function() {
    $('#pay').submit(function() {
        window.open('', 'payviewer', 'width=400,height=400,resizeable,scrollbars');
        this.action = 'popup.php';
        this.method = 'POST';
        this.target = 'payviewer';
    });
});
</script>

<form id="pay" >
    <input type="hidden" name="var" value="POST DATA SENT">
    <input type="text" name="name" id="name" value="홍길동">
    <input type="submit" value="결제하기">
</form>

=== 자식창 : popup.php ===

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language='javascript'>
$(document).ready(function() {
    $('#payreturn').submit(function() {
        var name = $("input[name='name']").val(); // 현재 폼의 입력값
        $("input[name='name']",opener.document).val(name); // 값 전달 방식 1
        //$(opener.document).find("#name").val(name); // 값 전달 방식 2

        //$("#name",opener.document).val(name); // 값 전달방식 3
        window.self.close(); // 현재 팝업 닫기
    });
});
</script>

<p><?php echo($_POST['var']); ?></p>
<form id="payreturn" >
    <input type="text" name="name" value="<?php echo($_POST['name']); ?>">
    <input type="submit" value="확인">
</form>

위 샘플코드의 파일

popup.zip

$("input[name='name']",opener.document).val(name);는 부모창의 id를 지정하지 않았어도 값을 변경할 수 있다.

$(opener.document).find("#name").val(name); 는 부모창의 id를 직접 찾아서 값을 변경한다.

jQuery 자식 팝업 창에서 부모창 컨트롤
$(opener.document).find("#Form").attr("action","index.do").submit();

// 팝업창에서 부모창 함수 호출

opener.location.href="javascript:fun();"; //일반적인 방법

$(opener.location).attr("href","javascript:부모스크립트함수명();"); //jQuery 이용
$(opener.location).attr("href","javascript:fun();"); //jQuery 이용

// 부모창의 필드값 가져오기

1. 일반적인 방법
var parentValue = opener.document.getElementById("parentId").value;
2. jQuery를 이용한 방법
$("#parentId", opener.document).val();
3. find를 이용한 방법
$(opener.document).find("#parentId").val();

//팝업창에서 부모창 새로고침(새로고침 의사 표현을 묻는 창이 뜸)
window.opener.parent.location.reload();
window.opener.document.location.reload();

// 작은 윈도우 창을 열어서(window.open) 특정 작업을 처리한 후 부모창(opener)을 refresh하는 방법

// window.opener.location.reload(); 에서 window는 생략 가능

<script>
opener.location.reload();
window.close();
</script>

//팝업창 자신 페이지 새로고침
document.location.reload();

//팝업창 닫기
window.self.close();

// 부모창의 URL을 대체시킨다.

opener.location.replace("URL정보");

// 전체 창에서 새 페이지 열기

top.location.href="abc.php";

// 연 창의 URL 이동

opener.location.href="abc.php";

<script type="text/javascript">
  alert("회원가입을 하시겠습니까?")
  location.href= "member.php"
</script>