[JavaScript] window.open() 새창 (팝업창) 띄우기

Intro

새 창을 띄울 때 사용할 수 있는 window.open() 에 대해 소개해보려고 한다.

Window.open()

Window 인터페이스인 open() 메서드는 명시된 리소스를 명시된 이름으로 브라우징 컨텍스트에 로드한다. 이름이 없다면 새 윈도우가 열리고 이 윈도우의 브라우징 컨텍스트에 명시된 리소스가 열린다.

syntax

var window = window.open(url, windowName, [windowFeatures]);

url

로드할 리소스의 URL을 나타내는 DOMString 이다. HTML 페이지, 이미지 파일 또는 브라우저에서 지원하는 기타 리소스에 대한 경로 또는 URL이 될 수 있다. 빈 문자열("")이 url로 지정되면 대상 탐색 컨텍스트로 빈 페이지가 열린다.

windowName

지정된 리소스를 로드할 탐색 컨텍스트(창, <iframe> 또는 탭)의 이름을 지정하는 DOMString. 이름이 기존 컨텍스트를 나타내지 않으면 새 창이 생성되고 windowName으로 지정된 이름이 지정된다. 이 이름은 <a> 또는 <form> 요소의 대상 속성으로 지정하여 링크 및 양식의 대상으로 사용할 수 있다. 이름에는 공백이 없어야 한다. 이것은 창의 표시되는 제목으로 사용되지 않는다는 점에 유의해야 한다. 문자열이 비어 있으면 브라우저는 매번 새 창을 만든다. (이 동작은 문자열이 NULL로 바뀌면 작동하지 않음).

windowFeatures (Optional)

"name = value" 형식의 해당 값과 함께 쉼표로 구분된 창 기능 목록을 포함하는 DOMString 이다. 이러한 기능에는 창의 기본 크기 및 위치, 스크롤 막대 포함 여부 등과 같은 옵션이 포함된다. 문자열에 공백이 없어야 한다.

return value

새로 만든 창을 나타내는 Window 개체이다. 창을 열 수 없는 경우 반환된 값은 대신 null이다. 반환된 Window 참조는 동일 출처 정책 보안 요구 사항을 준수하는 한 새 창의 속성 및 메서드에 액세스하는 데 사용할 수 있다.

Description

열기() 메서드는 파일 메뉴에서 새 창을 선택하는 것과 유사한 새 보조 브라우저 창을 만든다. strUrl 매개변수는 새 창에서 가져와 로드할 URL을 지정한다. strUrl이 빈 문자열이면 기본 창의 기본 도구 모음을 사용하여 비어 있는 새 창(URL 정보: 공백)이 만들어진다.

원격 URL은 즉시 로드되지 않는다. window.open()이 반환되면 창에는 항상 about: 공백이 포함된다. URL의 실제 가져오기는 지연되고 현재 스크립트 블록의 실행이 완료된 후 시작된다. 창 생성 및 참조 리소스 로드는 비동기적으로 수행된다

Example

var windowObjectReference;

function openRequestedPopup() {
  windowObjectReference = window.open(
    "http://www.domainname.ext/path/ImageFile.png",
    "DescriptiveWindowName",
    "resizable,scrollbars,status"
  );
}

https://developer.mozilla.org/ko/docs/Web/API/Window/open