개요
팝업창에서 부모창 (아래창, opener) 쪽에서 Submit 을 하는 과정에 대한 내용입니다.
중요 부분만
원래 창 (부모 창, Parent, opener) 에서 Script 예시
function openPopupWindow()
{
document.domain = "localhost"; //document.domain 값이 팝업과 부모창 동일해야 합니다.
window.open("popup.htm", "popup", "width=200, height=200, resizable=no, scrollbars=no") ;
}
팝업 창 에서 예시
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>POPUP Window</title>
</head>
<script>
function closeWithSubmit()
{
var f= document.forms.popupForm;
document.domain = "your domain";
opener.name = "openerNames";
f.target = opener.name;
f.submit();
self.close();
}
</script>
<body>
<a href="javascript:;" onclick="closeWithSubmit();">부모창으로 서브밋하고 종료</a>
<form name="popupForm" action="result.htm">
<input type="text" name="testValue" value="value123456789">
</form>
</body>
</html>
과정 설명
1. 두군데의 (팝업창과 부모창) document.domain 값이 동일해야합니다.
document.domain 값에 본인의 도메인 값을 적어주세요.
이 부분은 권한 관련된 문제로써,
2014/05/19 - [Development Story/Javascript] - [javascript] 팝업에서 opener 의 객체변경이 필요할 때
에서 포스팅 한 적이 있습니다.
예를 들면, 이 블로그의 경우 document.domain = "e2xist.tistory.com"; 이런식으로 값을 적으면 됩니다.
2. target 명이 동일해야 합니다. (팝업창에서 target 지정)
opener.name = "openerNames"; //유니크한 이름이어야 합니다.
f.target = opener.name;
opener.name 과 form의 target 명칭을 같게 맞춰주는 부분입니다.
opener 창의 name 이 따로 지정이 되어 있다면, form 의 target 부분에서 그대로 적어주면 됩니다.
문제가 다소 생긴다면, 위와 같이 해주시는게 편합니다.
opener.name 의 값으로는 아무거나 겹치지 않도록 넣어주시면 됩니다.
아래에 바로 테스트해볼 수 있는 소스를 참조합니다.
예제 소스 전체
(index.htm)
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
function openPopupWindow()
{
document.domain = "localhost"; //document.domain 값이 팝업과 부모창 동일해야 합니다.
window.open("popup.htm", "popup", "width=200, height=200, resizable=no, scrollbars=no")
}
</script>
<body>
<button onclick="openPopupWindow()">TEST</button>
</body>
</html>
(popup.htm)
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>POPUP Window</title>
</head>
<script>
function closeWithSubmit()
{
var f= document.forms.popupForm;
document.domain = "localhost"; //document.domain 값이 팝업과 부모창 동일해야 합니다.
opener.name = "openerNames"; //유니크한 이름이어야 합니다.
f.target = opener.name;
f.submit();
self.close();
}
</script>
<body>
<button onclick="closeWithSubmit();">부모창으로 서브밋하고 종료</button>
<form name="popupForm" action="result.htm">
<input type="text" name="testValue" value="value123456789">
</form>
</body>
</html>
(result.htm)
result!!
다운로드 받기.
* 위의 예제 소스의 압축 파일입니다.
* 실행할 때에는 localhost 에서 웹서버를 동작시킨 경로에 넣고 테스트를 해야 합니다. (도메인 값이 localhost 로 들어가 있기 때문)
* Chrome 브라우저에서 테스트 했습니다.
opener 에서 부모로 submit 예제.zip'개발 > Javascript, ECMAScript' 카테고리의 다른 글
| (Javascript) 자바스크립트 배열 생성 (0) | 2010.08.25 |
|---|---|
| (html) 파비콘 (0) | 2010.08.12 |
| (자바스크립트) 브라우저 체크 (0) | 2010.08.05 |
| IFRAME 리사이징 소스 (0) | 2010.08.05 |
| 윈도우 팝업에서 부모창의 값 가져오기. (0) | 2010.07.15 |
| elementById 와 elementByName (0) | 2010.07.15 |
| 칸 넘어가면 자르고 ... 붙여주는 스크립트. (0) | 2010.06.29 |
| 스크립트에서 주소 읽어오기 (0) | 2010.06.25 |