window 객체

window.open() 메서드는 새 브라우저 창이나 탭을 열 때 다양한 옵션을 설정할 수 있습니다. 이 옵션들은 새로 열리는 창이나 탭의 크기, 위치, 모양, 툴바 등의 속성을 지정합니다. 옵션은 specs 매개변수로 문자열 형태로 전달됩니다.

window.open('문서주소','윈도우이름','옵션=값,옵션=값,...');

주요 옵션

1. width: 새 창의 너비(픽셀 단위).
   • 예: width=800
2. height: 새 창의 높이(픽셀 단위).
   • 예: height=600
3. left: 새 창의 화면 왼쪽에서부터의 거리(픽셀 단위).
   • 예: left=100
4. top: 새 창의 화면 위쪽에서부터의 거리(픽셀 단위).
   • 예: top=100
5. resizable: 새 창의 크기를 조절할 수 있는지 여부. yes 또는 no로 설정.
   • 예: resizable=yes
6. scrollbars: 스크롤바의 표시 여부. yes 또는 no로 설정.
   • 예: scrollbars=yes
7. toolbar: 브라우저의 툴바 표시 여부. yes 또는 no로 설정.
   • 예: toolbar=no
8. menubar: 메뉴 바 표시 여부. yes 또는 no로 설정.
   • 예: menubar=no
9. location: 주소 표시줄의 표시 여부. yes 또는 no로 설정.
   • 예: location=no
10. status: 상태 표시줄의 표시 여부. yes 또는 no로 설정.
    • 예: status=no
11. fullscreen: 전체 화면 모드로 열 것인지 여부. yes 또는 no로 설정 (일부 브라우저에서는 지원되지 않을 수 있음).
    • 예: fullscreen=yes

사용 예제

아래는 다양한 옵션을 사용하여 window.open() 메서드를 호출하는 예제입니다.

 

const newWindow = window.open(
    'https://www.example.com',
    'exampleWindow',
    'width=800,height=600,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,status=no'
);

설명

• 이 코드는 https://www.example.com URL을 가진 새 창을 엽니다.
• 새 창의 크기는 800x600 픽셀이고, 화면의 (100, 100) 위치에 열리며, 크기를 조절할 수 있습니다.
• 스크롤바는 표시되지만, 툴바, 메뉴 바, 주소 표시줄, 상태 표시줄은 표시되지 않습니다.

주의사항

• 브라우저 호환성: 일부 옵션은 브라우저에 따라 다르게 작동하거나 지원되지 않을 수 있습니다. 예를 들어, Chrome과 Firefox에서는 toolbar, menubar, location, status 등의 일부 옵션이 무시될 수 있습니다.
• 팝업 차단기: 사용자가 직접 클릭한 이벤트에서만 새 창이 열리도록 설계되어 있으므로, 자동으로 열리는 팝업은 차단될 수 있습니다.
• 사용자 경험: 사용자에게 불필요한 팝업을 열지 않도록 주의해야 하며, 적절한 사용자 경험을 고려해야 합니다.