새창(윈도우) 띄우기 > 기술자료

• 목록

여러분 웹서핑을 하다보면 메뉴바나 상태바가 없는 그러한 작은 창이 뜨는 것 봤을 겁니다.
자바스크립트의 window.open이라는 명령어를 주죠...^^
새창열기의 다양한 방법을 정리하였습니다

2009-09-11
웹접근성평가기준에 의거  onclick (마우스 이벤트) 와  onkeypress (키보드 이벤트)를 함께 사용하도록 변경

2022-11-22
form 데이타를 새창으로 보내는 내용 추가


1. 창의 크기를 가로 350픽셀 세로 400픽셀 스크롤바를 주고 메뉴바를 보이게 할경우
<script type="text/javascript">
// 새창 띄우기 함수 정의
function OP() {  // OP 함수를 선언
  window.open("연결될페이지", "새창이름", "width=350, height=400, scrollbars=yes, menubar=yes");
}
</script>

<a href="#" onkeypress="OP()" onclick="OP()">새 창 열기</a>

[옵션]
copyhistory = yes/no : 지정하여 히스토리 정보를 저장
directories = yes/no : 윈도우의 directory button들의 출력여부
location = yes/no : 윈도우의 location box 표시여부
menubar = yes/no : 윈도우의 menubar 표시여부
resizable =  yes/no : 윈도우의 크기가 조정될 수 있는 지 결정
resizeTp() : 웹브라우저 크기를 지정한 수치로 변경
status = yes/no : 윈도우의 상태표시줄 표시여부
scrollbars = yes/no : 윈도우의 가로 세로 scrollbar 표시여부
toolbar = yes/no : 윈도우의 toolbar 표시여부
width : 새창의 가로 넓이를 픽셀 단위로 지정
height : 새창의 세로 높이를 픽셀단위로 지정


2.  링크를 클릭하면 새창이 뜨게
<a href="#" onclick="window.open('연결될페이지', '새창이름', 'width=350, height=400, scrollbars=yes, menubar=yes'); return false" onkeypress="window.open('연결될페이지','새창이름', 'width=350, height=400, scrollbars=yes, menubar=yes'); return false">클릭</a>


3. form 데이터를 새창에 보내기
<script type=”text/javascript”>
var new_win;
function new_win_create(){
    new_win = open('','new_win_name','width=300,height=200');
}
</script>
<form method="post" action="1234.html" target=”new_win_name” onsubmit="new_win_create();">
...
<input type="submit" value=" 저장 ">
</form>


참고자료
http://www.tagmania.net/zboard/zboard.php?id=tip&no=3
https://mytory.net/archives/16