최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

   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>












댓글