window.open() 메서드 : 새 브라우저 창을 엽니다.

   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>

---

Window open() Method

 Window Object

Example

Open "www.w3schools.com" in a new browser window:

window.open("http://www.w3schools.com");

Try it yourself »

---

Definition and Usage

The open() method opens a new browser window.

Tip: Use the close() method to close the window.

---

Browser Support

    

The open() method is supported in all major browsers.

---

Syntax

window.open(URL,name,specs,replace)

Parameter	Description
URL	Optional. Specifies the URL of the page to open. If no URL is specified, a new window with about:blank is opened
name	Optional. Specifies the target attribute or the name of the window. The following values are supported: _blank - URL is loaded into a new window. This is default _parent - URL is loaded into the parent frame _self - URL replaces the current page _top - URL replaces any framesets that may be loaded name - The name of the window (Note: the name does not specify the title of the new window)
specs	Optional. A comma-separated list of items. The following values are supported: channelmode=yes|no|1|0 Whether or not to display the window in theater mode. Default is no. IE only directories=yes|no|1|0 Obsolete. Whether or not to add directory buttons. Default is yes. IE only fullscreen=yes|no|1|0 Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode. IE only height=pixels The height of the window. Min. value is 100 left=pixels The left position of the window. Negative values not allowed location=yes|no|1|0 Whether or not to display the address field. Opera only menubar=yes|no|1|0 Whether or not to display the menu bar resizable=yes|no|1|0 Whether or not the window is resizable. IE only scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox & Opera only status=yes|no|1|0 Whether or not to add a status bar titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and Firefox only top=pixels The top position of the window. Negative values not allowed width=pixels The width of the window. Min. value is 100
replace	Optional. Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported: true - URL replaces the current document in the history list false - URL creates a new entry in the history list

Return Value

The reference to the new window.

---

More Examples

Example

Open an about:blank page in a new window:

var myWindow = window.open("", "", "width=200, height=100");

Try it yourself »

Example

Open a new window called "MsgWindow", and write some text into it:

var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");

Try it yourself »

Example

Replace the current window with a new window:

var myWindow = window.open("", "_self");
myWindow.document.write("<p>I replaced the current window.</p>");

Try it yourself »

Example

Open a new window and control its appearance:

window.open("http://www.w3schools.com", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");

Try it yourself »

Example

Open multiple windows:

window.open("http://www.google.com/");
window.open("http://www.w3schools.com/");

Try it yourself »

Example

Open a new window. Use close() to close the new window:

function openWin() {
myWindow = window.open("", "myWindow", "width=200, height=100");    // Opens a new window
}

function closeWin()
{
myWindow.close();                                                  // Closes the new window
}

Try it yourself »

Example

Open a new window. Use the name property to return the name of the new window:

var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");

Try it yourself »

Example

Using the opener property to return a reference to the window that created the new window:

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

Try it yourself »

---

 Window Object

출처(영어원문) : http://www.w3schools.com/jsref/met_win_open.asp