JavaScript로 새 브라우저 창을 여는 가장 좋은 방법

window 객체의 open() 메서드는 JavaScript를 사용하여 새 브라우저 창을 여는 가장 좋은 방법입니다. 이 메서드는 지정한 URL을 새 창이나 새 탭으로 열어주며, 창의 크기·위치 등 다양한 옵션도 함께 설정할 수 있습니다.

기본 문법

window.open(URL, name, specs, replace);

URL: 열고자 하는 페이지의 주소입니다. 생략하면 빈 창(about:blank)이 열립니다.
name: 새 창의 이름 또는 대상(_blank, _self 등)을 지정합니다.
specs: width, height, scrollbars 등 창의 속성을 쉼표로 구분하여 설정합니다.
replace: 브라우저 히스토리에 새 항목을 추가할지(true), 기존 항목을 대체할지(false) 결정합니다.

예제

다음은 버튼을 클릭하면 새 브라우저 창을 여는 전체 코드입니다 −

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>JavaScript로 새 브라우저 창 열기</h1>
<br />
<button class="Btn">여기를 클릭</button>
<h3>위 버튼을 클릭하면 새 브라우저 창이 열립니다</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", (event) => {
        window.open("https://www.google.com");
    });
</script>
</body>
</html>

실행 결과

JavaScript로 새 브라우저 창을 여는 가장 좋은 방법

'여기를 클릭' 버튼을 누르면 지정된 웹사이트(구글)로 이동합니다 −

JavaScript로 새 브라우저 창을 여는 가장 좋은 방법

참고로 최신 브라우저에서는 팝업 차단 기능 때문에 window.open()이 사용자의 클릭 같은 직접적인 상호작용 없이 호출되면 차단될 수 있으므로, 반드시 버튼 클릭 이벤트 안에서 호출하는 것이 좋습니다.