[javascript] 자식창에서 POST 형태로 부모창으로 보내기

window.open 형태로 부모창에서 자식창을 열어서 외부로 입력받는 폼값들을 만들었다.

문제는 자식창의 이러한 폼값들을 다시 원래의 부모창으로 POST 값들을 넘겨주어야 할때 생각해 보았다.

 

<script>
function sendPost() {
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', "/부모창.asp");
    document.charset = "utf-8";
 
    var hiddenField = document.createElement('input');
    hiddenField.setAttribute('type', 'hidden');
    hiddenField.setAttribute('name', 'name');
    hiddenField.setAttribute('value', '<%=name%>');
    form.appendChild(hiddenField);
 
    var hiddenField2 = document.createElement('input');
    hiddenField2.setAttribute('type', 'hidden');
    hiddenField2.setAttribute('name', 'hp');
    hiddenField2.setAttribute('value', '<%=hp%>');
    form.appendChild(hiddenField2);
 
 
    var hiddenField3 = document.createElement('input');
    hiddenField3.setAttribute('type', 'hidden');
    hiddenField3.setAttribute('name', 'ver_number');
    hiddenField3.setAttribute('value', '<%=ver_code%>');
    form.appendChild(hiddenField3);
 
    window.opener.document.body.appendChild(form);
    form.submit();
}
 
sendPost();
self.close();
</script>

위의 소스는 자식창의 예제 소스이다.

핵심은 27라인이다.

window.opener 형태로 부모창을 나타내고 있다.

hidden input박스값을 3개 만들고 post 방식으로 값을 submit 시킨다.

 

다소 어렵지 않다. 

문제는 크롬에서는 아주 잘 동작하는데, IE 에서는 위의 자식창이 닫히지도 않고 먹통이 되어 버린다.

 

이번에는 크롬과 IE 모두다 잘 작동되도록 소스를 고안하였다.

 

[ 부모창 ] 

<script>
window.name = "parentPage";
</script>

parentPage 는 임의의 값으로 아무나 넣어도 된다.

 

 

[ 자식창 ]

 

<form name="fm" method="post">
<input type="hidden" name="name" value="<%=name%>">
<input type="hidden" name="hp" value="<%=hp%>">
<input type="hidden" name="ver_number" value="<%=ver_code%>">
</form>
<script>
function sendPost() {
    document.fm.action = "/부모창.asp";
    document.fm.target = opener.window.name;
    document.fm.submit();
}
 
sendPost();
self.close();
</script>

핵심은 9라인이다.

document.fm.target = opener.window.name;