[JavaScript] 자식창에서 부모창 함수 호출

먼저 결과물

부모창이고 새창열기 누르면 window함수를 이용한 새창이 열림

---

부모창에서 새창열기 버튼 눌렀을 때 열리는 자식창

---

값을 입력하고 버튼 클릭

---

자식창에서 입력한 값을 가져오고 창 닫음

---

이제 소스

 

부모창 html

<div class="page-header">
    <h1>window 객체 테스트<small>부모창</small></h1>
    <P>자식창에서 전달 받은 값을 화면에 뿌려주고 자식창을 닫음</P>
</div>

<button class="btn btn-primary" onclick="openWindow()">새창열기</button>

<pre id="inputPre"></pre>

---

부모창 js (봐둘것 : window.함수명 )

var popup;
function openWindow() {
    console.log("openWindow");
    popup = window.open('/test4', 'test', 'width=1024,height=700','_blank');
};


window.call = function (data) {
    console.log("자식창에서 호출");
    console.log(data);
    var msg = '자식창에서 입력한 값 :\n' + data;
    $('#inputPre').html(data);
};

---

자식창 html

<div class="page-header">
    <h1>window 객체 테스트<small>자식창</small></h1>
    <P>input 창에 텍스트 입력 후 버튼을 누르면 부모창에 있는 함수를 호출하고 텍스트를 넘김</P>
</div>

<input type="text" id="sendMsg">
<button class="btn btn-primary" onclick="callParent()">부모창 함수 호출</button>

---

자식창 js (봐둘것 : opener.함수명)

function callParent () {
    console.log("부모창에 있는 함수 call 호출");
    var msg = $('#sendMsg').val();
    if (msg == '') {
        alert('input창에 텍스트를 입력해주시기 바랍니다.');
        return;
    }
    opener.call(msg);
    window.close();
};

//enter키 누르면 callparent 함수 실행 되도록
$('#sendMsg').bind('keydown keypress', function (e) {
    if (e.which === 13) {
        callParent();
    }
});

---

window.함수명 으로 함수를 하나 만들고

해당 소스에서 팝업을 띄운다음

팝업창에서 자신을 연 부모창에 선언된 함수를 사용할 수 있다.

부모창에 window.a = function () {} 으로 만들어 놨으면

팝업창에선 opener.a() 로 부모창에 있는걸 실행 할 수 있다.

 

이외에 부모창에서 입력된 값을 자식창에 가져오거나 아니면 반대로 가져오거나 등 방법은 많은데

생각보다 사용하기가 까다로운듯 하다.