JavaScript / window.open / 새 창 띄우기, 부모 창과 자식 창 사이 값 전달하기
window.open으로 새 창을 띄우고, 부모 창에서 자식 창으로, 자식 창에서 부모 창으로 값을 전달하는 방법을 정리한다.
부모 창이 parent.html, 자식 창이 child.html이다.
목차
새 창 띄우기
문법은 다음과 같다.
window.open( url, windowName, windowFeatures );
- url : 새 창에 들어갈 문서 주소
- windowName : 윈도우 이름
- windowFeatures : 새 창의 특성
예를 들어 다음은...
window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" );
child.html을 새 창으로 띄우고, 윈도우 이름은 Child, 가로 크기는 400px, 세로 크기는 300px, 위치는 화면의 위에서 50px, 왼쪽에서 50px라는 뜻이다.
새 창의 크기는 콘텐츠 영역으로, 창의 테두리, 주소 표시줄 등은 포함되지 않는다.
parent.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Parent</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Parent</h1>
<p><input type="button" value="New Window" onclick="new_window();"></p>
<script>
function new_window() {
window.open(
"child.html",
"Child",
"width=400, height=300, top=50, left=50"
);
}
</script>
</body>
</html>
child.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Child</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Child</h1>
</body>
</html>
화면의 가운데에 새 창 띄우기
parent.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Parent</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Parent</h1>
<p><input type="button" value="New Window" onclick="new_window();"></p>
<script>
var new_window_width = 400;
var new_window_height = 300;
var positionX = ( window.screen.width / 2 ) - ( new_window_width / 2 );
var positionY = ( window.screen.height / 2 ) - ( new_window_height / 2 );
function new_window() {
window.open(
"child.html",
"Child",
"width=" + new_window_width + ", height=" + new_window_height + ", top=" + positionY + ", left=" + positionX
);
}
</script>
</body>
</html>
자식 창에서 부모 창으로 값 보내기
우편번호 조회하여 주소 입력하는 것처럼, 부모 창에서는 입력하지 못하고, 자식 창에서 조회 또는 입력한 값만 부모 창에서 사용하고 싶을 때 유용하다.
parent.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Parent</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Parent</h1>
<p>
<input type="text" id="parentValue" readonly>
<input type="button" value="New Window" onclick="new_window();">
</p>
<script>
function new_window() {
window.open(
"child.html",
"Child",
"width=400, height=300, top=50, left=50"
);
}
</script>
</body>
</html>
child.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Child</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Child</h1>
<p>
<input type="text" id="childValue">
<input type="button" value="Send Value" onclick="sendValue();">
</p>
<script>
function sendValue() {
window.opener.document.getElementById( "parentValue" ).value = document.getElementById( "childValue" ).value;
window.close();
}
</script>
</body>
</html>
자식 창에서 부모 창 값 가져오기
아이디 중복 검사하는 것처럼, 부모 창에서 입력한 값을 자식 창에서 검색 또는 검증할 때 유용하다.
parent.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Parent</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Parent</h1>
<p>
<input type="text" id="parentValue">
<input type="button" value="Send Value" onclick="new_window();">
</p>
<script>
function new_window() {
window.open(
"child.html",
"Child",
"width=400, height=300, top=50, left=50"
);
}
</script>
</body>
</html>
child.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Child</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Child</h1>
<p>
<input type="text" id="childValue">
</p>
<script>
document.getElementById( "childValue" ).value = window.opener.document.getElementById( "parentValue" ).value;
</script>
</body>
</html>
Related Posts
JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성
.URL .URL 속성으로 문서의 URL을 가져올 수 있습니다. 문법 document.URL 예제 문서의 URL을 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.URL : " + document.URL + "</p>" ); </script> </body> </html> JavaScript / Object / Location - URL 정보 가져오는 객체
JavaScript / Object / String.endsWith() / 특정 문자열로 끝나는지 확인하는 메서드
.endsWith() .endsWith()는 문자열이 특정 문자열로 끝나는지 확인한다. IE는 Edge부터 지원한다. 문법 string.endsWith( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 문자열 중 어디까지 검색할지 정한다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abcde가 e로 끝나는지 검사한다. e로 끝나므로 true를 반환한다. 'abcde'.endsWith( 'e' ) abc가 e로 끝나는지 검사한다. e로 끝나지 않으므로 false를 반환한다. 'abcde'.endsWith( ...
JavaScript / 대화상자 / Alert, Confirm, Prompt
자바스크립트에서 대화상자는 세가지가 있습니다. Alert, Confirm, Prompt로, 새 창을 띄운다는 점은 같으나 역할이 다릅니다. Alert Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | alert</title> <script> alert( 'Lorem ipsum dolor' ); ...
JavaScript / Object / String.charAt(), String.charCodeAt()
.charAt(), .charCodeAt() .charAt() : 특정 위치에 있는 문자를 반환합니다. .charCodeAt() : 특정 위치에 있는 문자의 유니코드 값을 반환합니다. 문법 - .charAt() string.charAt( n ) 인덱스의 값이 n인 문자를 반환합니다. 예를 들어 "12345".charAt( 2 ) 는 3입니다. 만약 인덱스 n에 문자가 없으면 빈 문자열을 반환합니다. 문법 - .charCodeAt() string.charCodeAt( n ) 인덱스의 값이 n인 문자의 유니코드 값을 반환합니다. 예를 들어 "12345".charCodeAt( 2 ) 는 3의 유니코드 ...
JavaScript / 함수 / 함수 선언하고 호출하기
함수 선언하기 방법 1 function functionName( argument1, argument2, ... ) { // Do Something } 방법 2 var functionName = function( argument1, argument2, ... ) { // Do Something }; 함수 호출하기 functionName( value1, value2, ... ); 방법 1로 함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있습니다. functionName( value1, value2, ... ...
JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리
Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다. Lozad.js Lozad.js는 Lazy ...
JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수
isFinite() isFinite()은 매개변수가 유한값인지 검사하는 함수입니다. 문법 isFinite( value ) value : 검사할 값을 입력합니다. 유한한 숫자이면 true, 무한한 숫자 또는 숫자가 아니면 false를 반환합니다. 예제 123.123은 유한한 숫자이므로 true를 반환합니다. Infinity는 무한한 숫자이므로 false를 반환합니다. Not a Number는 문자이므로 false를 반환합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...
JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드
.querySelector() .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. 문법 document.querySelector( 'selector' ) 예를 들어 document.querySelector( '.xyz' ) 는 클래스 값이 xyz인 첫번째 요소에 접근합니다. 예제 1 클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / Object / Array.length / 배열의 길이 반환하는 속성
.length .length는 배열의 길이를 반환하는 속성입니다. 마지막 원소의 인덱스 값보다 1 큰 수를 반환합니다. 배열에 속한 원소의 개수와는 의미가 다릅니다. 문법 array.length 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; font-style: italic; } </style> </head> <body> <script> var jbAry1 = ; document.write( '<p>jbAry1.length : ' ...
JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수
Number() Number()은 문자열을 숫자로 변환하는 함수입니다. 문법 Number( object ) object : 문자열 또는 문자열을 값으로 하는 변수 등을 입력합니다. 숫자로 변환할 수 없는 값인 경우 NaN을 반환합니다. 예제 변수 c의 값은 문자 1과 문자 2를 더한 12입니다. 변수 d의 값은 숫자 1과 숫자 2를 더한 3입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...