자바스크립트 팝업/window - 자바스크립트 강좌 4강
※window 객체
window 객체는 새로운 페이지를 열 수 있고, 제어할 수 있습니다.
그리고 그것은 우리가 흔히 사용하고 접하는 팝업으로 응용할 수 있죠.
새 창! 즉 팝업을 새로 열고 컨트롤 하고 응용하는 법을 알아보도록 하겠습니다.
△window 객체 기본(팝업)
사용법)
window.open(경로, 타이틀, 속성);
예제)
1. 스크립트 코드
<script>
function popOpen(){
url = "pop.html";
title = "Go Learning!";
attr = "width=500, height=600, toolbar=no, location=no, status=no, scrollbars=no, resizable=no";
window.open(url, title, attr);
}
</script>
2. 본문 코드
<body>
<div id="wrap">
<input type="button" value="popup" onclick="popOpen()">
</div>
</body>
3. pop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learning Javascript! </title>
</head>
<body>
<div id="wrap">
Go Learning Popup!
</div>
</body>
</html>
결과)
△window 객체 속성
left : 창의 왼쪽 포지션
top : 창의 위쪽 포지션
height : 창의 높이
width : 창의 너비
menubar : 메뉴창 표시 여부
toolbar : 도구모음 표시 여부
location : 주소표시줄 표시 여부
status : 상태바 표시 여부
resizable : 윈도우 창 크기 변경 여부
scrollbars : 스크롤바 표시 여부
예제) 팝업창 위치 이동
기존 코드에서 left, top 속성값 추가.
<script>
function popOpen(){
url = "pop.html";
title = "Go Learning!";
attr = "width=300, height=400, toolbar=no, location=no, status=no, scrollbars=no, resizable=no, left=100, top=100";
window.open(url, title, attr);
}
</script>
결과)
예제) 스크롤 표시
위 코드에서 scrollbars=yes로 수정.
pop.html 코드에 줄바꿈 다수 삽입.
1. 스크립트 코드
<script>
function popOpen(){
url = "pop.html";
title = "Go Learning!";
attr = "width=300, height=400, toolbar=no, location=no, status=no, scrollbars=yes, resizable=no, left=100, top=100";
window.open(url, title, attr);
}
</script>
2. pop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learning Javascript! </title>
</head>
<body>
<div id="wrap">
Go Learning Popup!
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br>
</div>
</body>
</html>
결과)
이 외에 여러가지 속성들은 직접 테스트를 해보세요.
*여기서 잠깐.. 오류 잡고 가실게요~
익스플로러에서 팝업이 열리지 않는 경우!
지금까지 테스트 하면서 익스플로러에서 팝업이 열리지 않는 현상이 나타났습니다.
이런저런 테스트를 해 본 결과..
title 속성에 값에 대해 일부 텍스가 들어가면 팝업이 열리지 않네요.
팝업창이 열리지 않는 분은 공백 및 !(특수문자)를 제외하고 테스트를 해보세요.
그리고 window 객체. 즉 팝업창에서 부모창의 객체의 값도 제어할 수 있습니다.
우리가 종종 접했던 회원가입 페이지에서 볼 수 있었는데요.
회원가입을 위해 주소검색을 팝업에서 진행하고, 주소검색을 하고 난 후 선택한 값을 부모페이지에 입력하는 형태죠.
아래 예제는 익스플로러에서 테스트 하셔야 합니다.
크롬에서는 다음과 같은 문제로 아래 예제의 핵심 코드인 opener 객체를 PC에서 테스트할 수 없습니다.
(1)안전하지 않은 자바스크립트를 시도하는 경우
(2)도메인, 프로토콜, 포트의 접속상태가 일치하지 않는 경우
PC에서 예제를 실행할 경우 위와 같은 문제로 인해 크롬에서는 테스트가 불가 합니다.
웹서버에 올려서 테스틀 하거나, 익스플로러에서 테스트를 진행하세요.
△opener 객체 이용하여 부모창 제어
예제)
1. 01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learning Javascript! </title>
<script>
function popOpen(){
url = "pop.html";
title = "GoLearning";
attr = "width=300, height=400, toolbar=no, location=no, status=no, scrollbars=yes, resizable=no, left=100, top=100";
window.open(url, title, attr);
}
</script>
</head>
<body>
<div id="wrap">
<input type="button" value="popup" onclick="popOpen()"> </br>
<form name="addrForm">
주소 : <input type="text" name="address" size="30">
</form>
</div>
</body>
</html>
2. pop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learning Javascript! </title>
<script>
function inputAddress(){
var addrObj = document.getElementById("inputAddr").value;
opener.addrForm.address.value = addrObj;
self.close();
}
</script>
</head>
<body>
<div id="wrap">
Go Learning Popup! </br>
검색결과! </br>
<input type="text" id="inputAddr" size="30" value="서울시 강북구 수유동 먹자골목 7번지">
<input type="button" value="선택" onclick="inputAddress()">
</div>
</body>
</html>
3. 코드 설명
01.html
다른 코드는 위에서 진행했던 예제와 일치합니다.
다만 opener 객체를 사용하기 위해 form 속성이 추가되었습니다.
pop.html
텍스트박스에 임의로 주소값을 입력했습니다.
버튼을 클릭하면 텍스트박스의 주소값을 변수에 저장합니다.
opener객체를 이용하여 변수에 저장된 주소값을 입력합니다.
그리고 팝업창을 닫습니다.
opener 객체 사용법)
opener.부모창의폼.태그명.value = 저장할값;
결과)
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트 이벤트 - 자바스크립트 강좌 6강 (5) | 2016.06.04 |
|---|---|
| 자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 (1) | 2016.05.03 |
| 자바스크립트 location/navigator - 자바스크립트 강좌 3강 (3) | 2016.04.15 |
| 자바스크립트 윈도우 객체 / 자바스크립트 강좌 2강 alert, confirm, prompt, if~else (2) | 2016.04.09 |
| 자바스크립트 개념 / 기본구성 자바스크립트 강좌 1강 (0) | 2016.04.06 |