[개발/자바스크립트] window.open target 옵션 종류별 동작 설명

JavaScript의 `window.open()`메서드는 새 브라우저 창 또는 탭을 열 때 사용되며, 두 번째 인자는 새로 열리는 창의 이름이나 타겟(target)을 지정하는 데 사용됩니다.

이 인자는 문자열로 전달되며, 다음과 같은 주요 옵션과 차이를 가지고 있습니다.

차이점 요약

 

값	동작	설명
_blank	항상 새 창(탭) 열기	기존 창에 영향을 주지 않음
_self	현재 창에서 열기	현재 창의 콘텐츠 대체
_parent	부모 창에서 열기	iframe 내부일 때 부모 창을 대체
_top	최상위 창에서 열기	iframe 계층을 무시하고 최상위 창 대체
사용자 지정 이름	지정된 이름으로 새 창을 열거나 기존 창 재사용	창 간 데이터 공유 가능

옵션별 상세 설명

1. _blank

window.open('https://example.com', '_blank');

항상 새 창(또는 탭)을 엽니다.

• 현재 창과는 별개의 새 창(또는 탭)으로 콘텐츠가 열립니다.
• 대부분의 경우 기본값으로 사용됩니다.

2. _self

window.open('https://example.com', '_self');

현재 창(또는 탭)에서 링크를 엽니다.

• 기존 창을 재사용하여 새 콘텐츠를 로드합니다.
• `window.location.href`를 사용하는 것과 유사합니다.

3. _parent

window.open('https://example.com', '_parent');

현재 창이 `iframe`내부라면, 부모 창(parent frame)에서 링크를 엽니다.

• 부모 프레임이 없는 경우, `_self`와 동일하게 동작합니다.

4. _top

window.open('https://example.com', '_top');

현재 창이 `iframe`내부라면, 가장 상위 창(top-level browsing context)에서 링크를 엽니다.

• 프레임 구조를 무시하고 브라우저 전체 창에서 열립니다.

5. 사용자 지정 이름

window.open('https://example.com', '팝업명');

새 창의 이름을 지정하거나 기존 창을 식별하는 데 사용됩니다.

• 같은 이름이 전달되면 해당 이름으로 열린 기존 창을 재사용합니다.
• 다른 창과의 통신을 위해 `window.open`으로 반환된 객체를 사용할 수 있습니다.
• 브라우저 보안 정책에 따라 새 창이 팝업으로 처리될 수도 있습니다.