JavaScript select + window.open 완전 정리

 

 

Web Development · JavaScript

JavaScript select + window.open

select 선택값으로 새 창을 열고, 빈 새 창 문서를 직접 작성하는 흐름을 정리합니다.

시작 오늘 분석할 코드

이 예제는 브라우저가 제공하는 BOM 객체를 사용합니다. DOM 요소 조작과 달리 브라우저 창, 방문 기록, 브라우저 종류, 새 창 같은 실행 환경을 다루는 코드입니다.

function loadSite(select) { let index = select.selectedIndex; let site = select.options[index].value; window.open(site, "", "left=500,top=400,width=500,height=400"); } function printWelcome() { let newWin = window.open("", "", "left=500,top=400,width=200,height=80"); newWin.document.write("접속 감사합니다!<br>"); newWin.document.title = "환영"; newWin.document.body.style.backgroundColor = "yellowgreen"; newWin.document.write("열심히 하세요!"); newWin.document.close(); }

select여러 option 중 하나를 선택하는 폼 요소입니다.

selectedIndex현재 선택된 option 번호입니다.

optionsselect 안의 option 목록입니다.

window.open새 창 또는 새 탭을 엽니다.

myWin재사용할 창 이름입니다.

document.write문서에 문자열을 직접 씁니다.

---

1 select.selectedIndex 흐름

selectedIndex는 select 안에서 현재 선택된 option의 번호입니다. 원본 코드는 이 번호로 option을 찾고 value에 들어 있는 사이트 주소를 읽습니다.

onchange

→

selectedIndex

→

window.open

코드	의미	결과
select.selectedIndex	선택된 번호	0, 1, 2
select.options[index]	선택된 option 요소	네이버 option
option.value	이동할 URL	http://www.naver.com
window.open(site)	새 창 또는 새 탭 열기	선택 사이트 표시

---

2 새 창 이름의 의미

두 번째 select 예제는 window.open(site, "myWin", ...)처럼 창 이름을 지정합니다. 같은 이름을 쓰면 매번 새 창을 만들지 않고 같은 창을 재사용할 수 있습니다.

빈 이름 ""

브라우저 정책에 따라 새 창이나 새 탭이 계속 열릴 수 있습니다.

"myWin"

같은 이름의 창을 재사용하려는 의도를 나타냅니다.

원문 메모의 “myWin 알아봐야함”은 이 부분입니다. 이름이 같으면 같은 대상 창을 다시 사용합니다.

---

3 window.open 옵션 문자열

세 번째 인자는 창의 위치와 크기 옵션을 문자열로 전달합니다. 현대 브라우저에서는 팝업 차단이나 탭 정책 때문에 항상 그대로 반영되지는 않을 수 있습니다.

옵션	의미	예시
left	화면 왼쪽 기준 위치	left=500
top	화면 위쪽 기준 위치	top=400
width	창 너비	width=500
height	창 높이	height=400
쉼표	옵션 구분자	left=500,top=400

---

 

반응형

 

4 새 창 문서에 쓰기

window.open("", "", ...)처럼 빈 창을 연 뒤 newWin.document.write()로 새 문서 내용을 직접 작성할 수 있습니다.

1

빈 창 열기window.open으로 새 window 객체를 받습니다.

2

내용 쓰기newWin.document.write로 문자열을 출력합니다.

3

제목 변경newWin.document.title에 값을 넣습니다.

4

문서 닫기document.close로 쓰기 흐름을 마무리합니다.

---

5 document.close가 필요한 이유

새 창 문서에 write를 사용하면 브라우저에게 문서 작성이 끝났다는 신호를 주는 것이 좋습니다. 그래서 원본 예제는 마지막에 newWin.document.close()를 호출합니다.

document.write는 학습용으로 흐름이 단순하지만, 실제 서비스에서는 새 HTML 파일을 열거나 DOM API로 요소를 만드는 방식이 더 안정적입니다.

---

6 팝업 차단 주의

페이지 로드 시점에 자동으로 window.open을 실행하면 브라우저가 팝업으로 판단해 차단할 수 있습니다. 사용자가 클릭한 이벤트 안에서 여는 편이 성공률이 높습니다.

실행 시점	차단 가능성	권장
body onload	높음	학습용으로만 사용
button onclick	낮음	권장
select onchange	브라우저별 차이	사용자 조작 흐름이라 비교적 자연스러움
setTimeout 자동 실행	높음	피하는 편이 좋음

---

7 http 주소와 새 창

원본 select 예제는 http 주소를 사용합니다. 최신 브라우저와 실제 서비스에서는 https 주소를 쓰는 편이 좋습니다.

주소	특징	권장 처리
http://www.naver.com	예전 예제에서 자주 보임	https 주소로 변경 검토
http://www.google.com	대부분 https로 리다이렉트	처음부터 https 사용
http://www.oracle.com	외부 사이트	새 창 안내 제공
빈 문자열	새 빈 문서	document.write 예제에 사용

---

8 자주 하는 실수

실수	증상	해결
selectedIndex를 option 값으로 착각	주소 대신 숫자만 얻습니다.	options[index].value까지 접근합니다.
창 이름을 매번 다르게 줌	새 창이 계속 늘어납니다.	재사용하려면 같은 이름을 씁니다.
팝업 자동 실행	브라우저가 차단합니다.	클릭 이벤트 안에서 실행합니다.
document.close 누락	문서 작성이 덜 끝난 것처럼 보일 수 있습니다.	write 후 close를 호출합니다.
옵션 문자열 공백/쉼표 오류	크기나 위치가 적용되지 않습니다.	left=500,top=400 형식을 지킵니다.

---

9 복습 체크리스트

체크	통과 기준
selectedIndex	선택된 option 번호를 읽을 수 있습니다.
options	번호로 option 요소에 접근할 수 있습니다.
window.open	URL, 이름, 옵션 인자의 의미를 설명합니다.
myWin	같은 이름의 창을 재사용한다는 뜻을 압니다.
document.write	새 창 문서에 문자열을 쓸 수 있습니다.
popup	자동 팝업 차단 가능성을 알고 있습니다.

---

10 직접 바꿔보기

A

target 이름 변경myWin을 다른 이름으로 바꾸고 창 재사용이 어떻게 달라지는지 봅니다.

B

크기 변경width와 height 값을 늘려 새 창 크기를 비교합니다.

C

버튼으로 변경onload 자동 실행 대신 버튼 클릭으로 printWelcome을 실행합니다.

D

배경색 변경newWin.document.body.style.backgroundColor 값을 바꿔봅니다.

const popup = window.open("", "myWin", "width=300,height=160"); popup.document.write("새 창 내용"); popup.document.close();

---

10 디버깅 순서

select와 window.open 예제는 선택 이벤트, URL 값, 팝업 차단 여부를 나누어 보면 문제를 쉽게 찾을 수 있습니다.

순서	확인	이유
1	onchange 실행 여부	select 선택이 함수 호출로 이어지는지 확인합니다.
2	selectedIndex 값	선택된 번호가 예상과 같은지 봅니다.
3	option value 값	실제로 열 주소가 들어 있는지 확인합니다.
4	window.open 반환값	팝업이 차단되면 null처럼 다룰 수 있습니다.
5	창 이름	같은 창을 재사용하는지 새 창이 계속 생기는지 봅니다.
6	document.close 호출	새 창 문서 쓰기가 끝났는지 확인합니다.

function loadSite(select) { console.log(select.selectedIndex, select.value); const popup = window.open(select.value, "myWin", "width=500,height=400"); console.log(popup); }

---

11 안전한 팝업 처리

팝업은 브라우저 정책 영향을 많이 받습니다. 열기에 실패할 수 있다는 전제를 두고 안내 메시지를 준비하면 사용자 경험이 좋아집니다.

상황	증상	처리
팝업 차단	새 창이 열리지 않습니다.	사용자에게 팝업 허용 안내를 표시합니다.
URL 없음	빈 창이 열립니다.	value가 있는지 먼저 검사합니다.
http 주소	보안 경고나 리다이렉트가 생깁니다.	https 주소를 사용합니다.
창 이름 중복	기존 창 내용이 바뀝니다.	재사용 의도인지 확인합니다.
자동 실행	브라우저가 차단합니다.	클릭 같은 사용자 이벤트 안에서 실행합니다.

1

URL 검사빈 값이면 window.open을 실행하지 않습니다.

2

팝업 결과 확인반환값이 있는지 보고 차단 여부를 추정합니다.

3

사용자 안내필요하면 팝업 허용 안내를 표시합니다.

4

대체 링크 제공팝업이 막혀도 이동할 수 있는 일반 링크를 둡니다.

---

12 실무 적용 메모

새 창은 결제, 외부 문서, 관리자 도구처럼 현재 화면을 유지하면서 별도 정보를 보여줄 때 유용합니다. 그러나 남용하면 사용자가 창 흐름을 잃기 쉽습니다.

상황	추천	이유
외부 사이트 이동	새 탭 또는 일반 링크	사용자 선택권을 줍니다.
작은 안내창	모달 검토	팝업 차단을 피할 수 있습니다.
학습 예제	window.open 사용	BOM 흐름을 이해하기 좋습니다.
동일 창 재사용	창 이름 지정	창이 계속 늘어나는 것을 줄입니다.

---

13 테스트 케이스

케이스	준비	예상 결과
첫 번째 option	네이버 선택	selectedIndex가 0이고 해당 value가 열립니다.
두 번째 option	구글 선택	selectedIndex가 1로 바뀝니다.
빈 이름	두 번째 인자를 ""로 둠	새 창이나 새 탭이 계속 생길 수 있습니다.
같은 이름	두 번째 인자를 myWin으로 둠	기존 창이 재사용될 수 있습니다.
자동 실행	onload에서 open 실행	팝업 차단 여부를 확인합니다.
버튼 실행	onclick에서 open 실행	차단 가능성이 낮아지는지 확인합니다.
팝업 반환값	console.log(popup)	차단되었는지 확인합니다.

---

핵심 한 줄 요약

selectedIndex선택 번호로 option value를 읽습니다.

window.openURL, 이름, 옵션을 받아 새 창을 엽니다.

myWin같은 이름을 쓰면 창을 재사용할 수 있습니다.

Tags

#JavaScript#select#selectedIndex#window.open#popup#document.write#myWin#BOM#DOM#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, select, selectedIndex, window.open, popup, document.write, myWin, BOM, DOM, 티스토리