[JavaScript] 자바스크립트 팝업창 오픈 방법

728x90

목 차

• 1. window.open() 메서드란?
• 2. window.open() 메서드 기본 문법
• 3. 팝업창 열기 예제 소스
• 4. 팝업 크기와 속성 설정 예제 소스
• 5. 팝업이 차단이 되지 않도록 하는 팁

반응형

 

1. window.open() 메서드란?

• JavaScript를 사용하여 팝업 브라우저를 열기 위해서는 window.open() 메서드를 사용하면 됩니다. 이 메서드는 새 창이나 탭을 열어 특정 URL을 표시할 수 있습니다.

 

---

 

2. window.open() 메서드 기본 문법

window.open(url, target, features);

• url: 열고자 하는 페이지의 URL (예: 'https://example.com'). 빈 문자열로 두면 빈 창이 열립니다.
• target: 새 창의 이름 또는 동작 (예: _blank, _self, _parent, _top).
  • _blank: 새 창/탭으로 열기.
  • _self: 현재 창에서 열기.
  • 특정 이름을 지정하여 창을 재사용 가능.
• features: 팝업 창의 크기, 위치, 속성을 설정하는 옵션 문자열 (쉼표로 구분).
  • width: 창의 가로 크기 (픽셀).
  • height: 창의 세로 크기 (픽셀).
  • left: 화면에서 창의 왼쪽 위치 (픽셀).
  • top: 화면에서 창의 위쪽 위치 (픽셀).
  • resizable: 창 크기 조정 가능 여부 (yes 또는 no).
  • scrollbars: 스크롤바 표시 여부 (yes 또는 no).
  • toolbar, menubar, status, location: 도구 모음 및 기타 UI 요소 표시 여부.

 

---

 

3. 팝업창 열기 예제 소스

// 간단한 팝업 열기
window.open('https://spirit0833.tistory.com/102', '_blank');

 

---

 

4. 팝업 크기와 속성 설정 예제 소스

// 가로 500px, 세로 400px 크기의 팝업 열기
window.open(
  'https://spirit0833.tistory.com/102',
  '_blank',
  'width=500,height=400,scrollbars=yes,resizable=yes'
);

 

---

 

5. 팝업이 차단이 되지 않도록 하는 팁

• 많은 브라우저에서 팝업 차단 기능이 기본적으로 활성화되어 있습니다.

1. 사용자 행동 기반: 클릭, 버튼 누름 등 사용자 이벤트에 의해 팝업을 열도록 작성.
2. 브라우저 권한 설정: 일부 브라우저는 window.open을 제한적으로 허용하므로 팝업 관련 기능을 테스트해야 합니다.

document.getElementById('myButton').addEventListener('click', function () {
    window.open('https://spirit0833.tistory.com/102', '_blank');
});