웹브라우저에서 새창을 열기 위해서 가장 간단히 사용할 수 있는 방법이 자바스크립트 window 객체의 open() 함수를 사용하는 것입니다.
1. 문법(Syntax)
| var ret = window.open(url, name, specs, replace); |
1.1. 반환값(ret)
새로 만들어진 창 객체가 반환됩니다. 창의 생성에 실패하면 null을 반환합니다. 이 객체를 통해서 새창을 제어할 수 있습니다. 예로 ret.close(); 로 창을 닫을 수 있습니다.
1.2. url
새창에 보여질 주소 입니다. 선택적인 값으로 비워두면 빈창(about:blank)이 보입니다.
1.3. name
새로 열릴 참의 속성 또는 창의 이름을 지정합니다. 선택적인 값으로 기본값은 "_blank" 입니다. 사용 가능한 값을 다음과 같습니다.
- _blank : 새 창에 열립니다. 이것이 기본값입니다.
- _parent : 부모 프레임에 열립니다.
- _self : 현재 페이지를 대체합니다.
- _top : 로드된 프레임셋을 대체합니다.
- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다. 다른 이름을 사용하면 또다른 새창이 열립니다.
1.4 specs
선택적인 값으로 창의 크기, 스크롤여부, 리사이즈 가능등의 속성을 지정합니다. 사용가능한 값을 다음과 같습니다.
- channelmode=yes|no|1|0 : 전체화면으로 창이 열립니다. IE에서만 동작합니다.
- directories=yes|no|1|0 : (사용되지 않습니다.) 디렉토리 버튼의 표시여부
- fullscreen=yes|no|1|0 : 전체 화면 모드. IE에서만 동작합니다.
- height=pixels : 창의 높이를 지정합니다.(height=600)
- width=pixels : 창의 너비를 지정합니다.(width=500)
- left=pixels : 창의 화면 왼쪽에서의 위치를 지정합니다. 음수는 사용할 수 없습니다.
- top=pixels : 창의 화면 위쪽에서의 위치를 지정합니다. 음수는 사용할 수 없습니다.
- location=yes|no|1|0 : 주소 표시줄 사용여부를 지정합니다. Opera에서만 동작합니다.
- menubar=yes|no|1|0 : 메뉴바 사용여부를 지정합니다.
- resizable=yes|no|1|0 : 창의 리사이즈 가능 여부를 지정합니다. IE에서만 동작합니다.
- scrollbars=yes|no|1|0 : 스크롤바 사용여부를 지정합니다. IE, Firefox, Opera에서 동작합니다.
- status=yes|no|1|0 : 상태바를 보여줄지 지정합니다.
- titlebar=yes|no|1|0 : 타이틀바를 보여줄지 지정합니다. 호출 응용 프로그램이 HTML 응용 프로그램이거나 신뢰할 수있는 대화 상자가 아니면 무시됩니다.
- toolbar=yes|no|1|0 : 툴바를 보여줄지 지정합니다. IE, Firefox에서 동작합니다.
IE11에서 테스트 해본결과 channelmode는 타이틀바가 보이고, fullscreen모드는 타이틀바 없이 창이 떳습니다.
1.5 replace
히스토리 목록에 새 항목을 만들지 현재 항목을 대체할지 지정합니다.
- true : 현재 히스토리를 대체합니다.
- false : 히스토리에 새 항목을 만듭니다.
2. 사용예
- 가장 일반적인 사용예 입니다. popup.html 을 지정된 크기의 창에 팝업 합니다.
| var win = window.open("/popup.html", "PopupWin", "width=500,height=600"); |
- 빈 창을 열고 내용을 동적으로 적습니다.
| var win = window.open("", "PopupWin", "width=500,height=600"); win.document.write("<p>새창에 표시될 내용 입니다.</p>"); |
- 창 컨트롤을 모두 활성화 합니다.
| var win = window.open("/popup.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400"); |
무엇보다 용어를 잘 알아두는 일이 중요할것 같네요
답글
가끔 사용하는데 옵션들을 자꾸 잊어먹어서 적어 둡니다.ㅎㅎ
http://joool.tistory.com/215?category=761002
게시글 참고하고 출처 밝혔습니다, 감사합니다!
답글
새창열고 post 요청을 보내는 방법이 있을까요?
답글
빈창을 띄운뒤에 그 창 이름을 타겟으로 submit 하면 됩니다.
<html>
<head>
<title>pop post</title>
<script>
function popup() {
var win = window.open("", "PopupWin", "");
document.PopForm.submit();
}
</script>
</head>
<body>
<button onclick="popup();">팝업</button>
<form name="PopForm" action="target.html" method="post" target="PopupWin">
<input type="text" value="TEST" />
</form>
</body>
</html>
좋은 정보 감사합니다.
답글
방문해 주셔서 감사합니다.^^
좋은 정보 감사합니다. 창을 띄우거나 크기를 지정하는 코드는 쉽게 알 수 있었는데 어떤 브라우저에서 지원되는지까지는 쓰여있지 않아서 한참 동안 바보같이 크롬에만 했었는데 덕분에 공부가 되었습니다.
답글
방문해 주셔서 감사합니다.^^
글 너무 잘읽었습니다! 저 궁금한점이있는데요 ㅜ window.open는 form형식에서 target으로 연결해줘야만 하나요? ㅜ 혹시 a태그로 연결하는 방법은 없을까요?ㅜ
답글
window.open() 함수를 자바스크립트입니다. 그러므로 자바스크립트를 실행할 수 있는 모든 곳에서 가능합니다.
당연히 A 태그에도 사용할 수 있습니다. 아래 처럼 사용하면 됩니다.
<a href="javascript:window.open(...);">
그외에도 페이지가 뜰때, 마우스를 클릭할때(onclick 이벤트를 받는 모든곳), 마우스를 올릴때 등 이벤트 함수를 사용할 수 있는 모든곳에서 사용할 수 있습니다.
도움이 되었으면 좋겠네요.^^
많은 도움 되었어요.
감사합니다.
답글
방문해주셔서 감사합니다.^^
새 페이지를 열고 그 새 페이지의 정보를 따올 수 있을까요?
새 페이지가 영상 페이지일 때 그 영상을 autoplay시키고 그 영상이 끝날때 새 창을 닫는 방법을 알고 싶습니다.
답글
새 페이지를 열고, 그 페이지를 연 페이지에서 열린 새 페이지의 정보를 따올 수 있습니다. windows.open() 함수의 반환 객체를 사용하여 접근할 수 있습니다.
하지만, 원하는 새페이지의 영상을 autoplay시키고, 영상이 끝날때 창을 닫는 것은 모두 새 페이지에서 처리하면 됩니다.
이전 페이지가 열린페이지의 정보를 사용할 필요가 없을것 같습니다.
문제는 영상을 플레이하는 플레이어를 javascript로 제어할 수 있는가 하는게 문제입니다. 필요한 기능은 다음과 같습니다.
1. 자바스크립트로 플레이어를 play 시킬수 있다.(페이지의 onload 이벤트에 플레이어를 시작시키면 됩니다.)
2. 플레이어의 영상이 끝나는 이벤트에 자바스크립트 함수를 등록하여 실행할 수 있다(이게 되면 영상이 끝날때 창을 닫을 수 있습니다).
마지막으로 사족을 하나 달자면 웹 접근성에 관련된 내용들을 보면 페이지가 시작할때 자동으로 영상을 시작하거나 자동으로 창을 닫는 등의 동작은 하지 않는게 좋다고 했었던것 같습니다.
영상의 자동 시작은 광과민성증후군을 가진 사람에게 문제가 될 수 있고, 창을 자동으로 닫는 것은 시각 장애가 있는 사람이 그 상황을 인지하지 못할 수 있어서 문제가 될 수 있었던것 같습니다.
하여튼 기능 구현 성공하길 바랄께요.^^