티스토리 뷰
window open() 메서드
open()메서드는 새 브라우저 창을 엽니다.
팁 : close()메서드는 브라우저를 닫습니다.
문법
window.open(URL,name,specs,replace)
파라메터
1.URL
URL : 오픈할 페이지의 URL 입력, 만약 URL값이 없으면 "about:blank" 로 오픈 됨.
2.name
name : 대상 속성이나 윈도우의 이름을 지정.
_blank : 새창으로 로드 (기본)
_parent : 부모 프레임에 로드
_self : 현재 페이지에
_top : URL을 로드할 수 있는 프레임셋에.
name : 윈도우의 이름(title과는 다르며 title로 지정되지 않음)
3.specs
specs : ,(콤마)로 구분된 목록 다음과 같은 값이 지원 된다.
channelmoce = yes/no/1/0 : theater(극장)모드 (기본값 NO). IE전용
directories = yes/no/1/0 : (비표준) 디렉토리 버튼을 추가 할수 있는지 여부 (기본값 yes). IE전용
fullscreen = yes/no/1/0 : 전체화면 모드. 전체화면 모드에서 창은 극장 모드에 있어야 합니다. (기본값 NO). IE전용
width = pixels : 윈도우의 폭. 최소값은 100
height = pixels : 윈도우의 높이. 최소값은 100
left = pixels : 창의 왼쪽 위치 (음의 값은 안됨)
top = pixels : 창의 위쪽 위치 (음의 값은 안됨)
location = yes/no/1/0 : 주소 표시줄의 여부
menubar = yes/no/1/0 : 메뉴 표시줄의 여부
resizeable = yes/no/1/0 : 창 크기 조절 여부
scrollbars = yes/no/1/0 : 스크롤 막대 표시 여부
status = yes/no/1/0 : 상태 표시줄 여부
toolbar = yes/no/1/0 : 도구모음 표시 여부
4.replace
옵션을 대체. URL이 새 항목을 만들거나 기록 목록(history list)에 있는 현재 항목을 대체할지의 여부를 지정합니다.
true - URL 히스토리 목록에 있는 현재 문서를 대체.
false - URL 히스토리 목록에 새 항목을 만듭니다.
리턴값
새로 만들어진 창에 대한 값 참조.
예제
1.새 창 띄우기
var myWindow = window.open("", "", "width=200, height=100");
직접 실행 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open2
2.새 창을 띄우고 팝업 안에 메세지 넣기
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
직접 실행 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open3
3.현재 창으로 띄우면서 메세지 넣기
var myWindow = window.open("", "_self");
myWindow.document.write("<p>I replaced the current window.</p>");
직접 실행 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open4
4.새 창 띄우고 속성 지정 (가장 보편적. 급하신 분들은 복사&붙여넣기)
window.open("http://www.w3schools.com", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
실행 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open5
5. 여러개의 창 띄우기
window.open("http://www.google.com/");
window.open("http://www.w3schools.com/");
실행 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open6
6. "open"버튼으로 팝업을 띄우고, "close"버튼으로 팝업을 다시 닫기
function openWin()
{
myWindow = window.open("", "myWindow", "width=200, height=100"); // Opens a new window
}
function closeWin()
{
myWindow.close(); // Closes the new window
}
실행 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_close
7. 새 창 띄우고 윈도우의 이름(name)속성을 출력
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");
실행 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_name
8. 새 창을 띄우고 반환 값에 메세지 출력, 오프너(부모창)의 이름 변경
var myWindow = window.open("", "myWindow", "width=200, height=100"); // Opens a new window
myWindow.document.write("<p>This is 'myWindow'</p>"); // Text in the new window
myWindow.opener.document.write("<p>This is the source window!</p>"); // Text in the window that created the new window
실행 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_opener
실무
<script language="JavaScript">
function go_intro(num)
{
url = itostr(num)+"/page.html";
window.open(url, "study","width=1000, height=680, menubar=no,toolbar=no,location=no,status=no,fullscreen=no,scrollbars=no,resizable=yes,top=0,left=0");
}
function itostr(inum)
{
return inum<10?"0"+inum:inum;
}
go_intro(3); // "03/page.html"
</script>
'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글
정규식 (1) | 2015.02.05 |
---|---|
변수에 함수를 할당 (0) | 2014.05.09 |
폼데이터 - 팝업창에서 부모창으로 submit (0) | 2014.02.26 |
폼데이터 - 부모창에서 팝으로 submit (0) | 2014.02.26 |
새로고침 방지 샘플 스크립트 (0) | 2014.02.19 |