Window open() 메서드

정의와 사용법

open() 메서드는 새 브라우저 창이나 탭을 엽니다. 브라우저 설정과 매개변수 값에 따라 다릅니다.

추가 정보:

close() 메서드

인스턴스

예제 1

"www.codew3c.com"을 새 브라우저 탭에서 엽니다.:

window.open("https://www.codew3c.com");

직접 경험해보세요

하단 페이지에서 더 많은 예제를 제공합니다.

문법

window.open(url, name, features, replace)

파라미터

파라미터 설명
url

선택 사항. 열고자 하는 페이지의 URL.

지정되지 않으면 url이 경우 새로운 빈 창이나 탭이 열립니다.
name 선택 사항. target 속성이나 창의 이름.
features 선택 사항. 쉼표로 구분된 항목 목록, 공백 없음.
replace

사용 중지됨.

URL이 새 항목을 생성하거나 히스토리 목록의 현재 항목을 대체할지 정의합니다.

다음 값을 지원합니다:

  • true - URL이 히스토리 목록의 현재 문서를 대체
  • false - URL이 히스토리 목록에서 새 항목을 생성

경고:Chrome에서 사용 replace 파라미터를 설정할 때 예외가 발생합니다.

name 매개변수는 다음 값을 지원합니다:

값 설명
_blank URL이 새 창이나 탭에 로드됩니다. 기본 설정.
_parent URL이 부모 프레임에 로드됩니다.
_self URL을 현재 페이지에서 대체합니다.
_top URL을 가능한 모든 프레임셋에 대체합니다.
name 창의 이름(창의 제목을 지정하지 않습니다).

features 파라미터는 다음 값들을 지원합니다:

값 설명
fullscreen=yes|no|1|0 브라우저를 전체 화면 모드로 표시할지 여부. 기본적으로는 아닙니다. 전체 화면 모드의 창은 필름 모드에도 있어야 합니다. IE에 제한됩니다.
height=pixels 창의 높이는 픽셀로 계산됩니다. 최소值为 100.
left=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에 제한됩니다.
top=pixels 창의 상단 위치(이 위치), 픽셀로 계산됩니다. 부정 값은 허용되지 않습니다.
width=pixels 창의 너비는 픽셀로 계산됩니다. 최소值为 100.

반환 값

새 창에 대한 참조를 반환하며, 호출이 실패하면 null을 반환합니다.

기술 세부 사항

설명

open() 메서드는 존재하는 창을 찾거나 새 브라우저 창을 엽니다. 만약 name 파라미터로 이미 존재하는 창이 지정되면, 해당 창에 대한 참조를 반환합니다. 반환된 창은 url 파라미터로 지정된 문서를 표시하지만 features 파라미터가 없을 때, 이는 JavaScript가 해당 창에 대한 참조를 얻는 유일한 방법입니다.

지정하지 않으면 name 파라미터를 표시하거나, 지정한 창이 없으면 open() 메서드는 새 브라우저 창을 생성합니다. 이 새 창은 url 파라미터로 지정된 URL, 그 이름은 name 파라미터를 지정하면, 크기와 컨트롤은 features 파라미터를 지정합니다. 만약 url 이 이름이 공백 문자열이면 open() 새 창을 엽니다.

name 파라미터는 새 창의 이름을 지정합니다. 이 이름에는 숫자, 문자, 밑줄만이 가능합니다. 이 이름은 표시기로 사용될 수 있습니다. <a> 와 <form> target 속성 값이 있어 문서가 지정된 창에서 표시되도록 강제합니다.

메서드를 사용할 때 Window.open() 기존 지정된 창에 새 문서를 로드할 때, 그것에 전달할 수 있습니다. replace 파라미터와 동일합니다. 새 문서가 창의 브라우징 历史에서 자신의 항목을 가지게 되는지 혹은 현재 문서의 항목을 대체하는지를 선언하는 데 사용됩니다. replace 의 값이 true라면 새 문서는 오래된 문서를 대체합니다. 값이 false 또는 생략되면 새 문서는 창의 브라우징 历史에서 자신의 항목을 가지게 됩니다. 이 파라미터가 제공하는 기능은 Location.replace() 메서드 제공하는 기능이 매우 유사합니다。

와 혼동하지 마세요 Window.open() 메서드는 Document.open() 메서드을 사용하지 않기 때문에 코드가 명확하게되려면 Window.open()로 해석하지 않고 open()를 사용해야 합니다。정의된 HTML 속성 이벤트 핸들러에서는 일반적으로 함수 open()를 Document.open()따라서 이 경우에는 Window.open()。

창 특성

features 파라미터는 창이 표시할 특성 목록입니다. 각 특성은 콤마로 구분됩니다. 이 선택적 파라미터의 값이 비어 있거나 생략되면 창은 모든 특성을 표시합니다. 그러나 features 특성을 지정하면 이 목록에 나타나지 않은 특성은 창에서 표시되지 않습니다. 주의할 점은 이 문자열이 공백이나 공백 문자를 포함하지 않으며 각 요소의 형식은 다음과 같습니다：

feature[=value]

대부분의 특성에서는value 의 값은 yes 또는 no입니다. 이 특성 뒤의 등호와 value 값은 생략할 수 있습니다. 특성이 나타났다면 그 값은 생략할 수 있습니다. value 값은 yes입니다. 나타나지 않으면 기본적으로 value 값은 no입니다. 그러나 width 또는 height의 특성이 value 값은 필수입니다. 그들의 픽셀 값을 반드시 지정해야 합니다。

브라우저 지원

모든 브라우저가 지원합니다 open()：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원 지원

더 많은 예제

예제 2

새 창/탭에서 about:blank 페이지를 엽니다：

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

직접 경험해보세요

예제 3

이름이 "MsgWindow"인 새 창을 엽니다. 그 안에 텍스트를 입력합니다：

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

직접 경험해보세요

예제 4

이 새 창으로 현재 창을 대체하세요：

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

직접 경험해보세요

例子 5

打开新窗口并控制其外观：

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

직접 경험해보세요

例子 6

打开多个标签：

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

직접 경험해보세요

例子 7

打开新窗口。然后使用 close() 关闭这个新窗口：

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");   // 打开新窗口
}
function closeWin() {
  myWindow.close();   // 关闭这个新窗口
}

직접 경험해보세요

例子 8

打开新窗口。使用 name 属性返回新窗口的名称：

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

직접 경험해보세요

例子 9

使用 opener 属性返回对创建新窗口的窗口的引用：

var myWindow = window.open("", "myWindow", "width=200,height=100");   // 打开新窗口
myWindow.document.write("<p>This is 'myWindow'</p>");   // 新窗口中的文本
myWindow.opener.document.write("<p>This is the source window!</p>");  // 创建新窗口的窗口中的文本

직접 경험해보세요