HTML DOM Window stop() 메서드 – 브라우저 중지 버튼 없이 페이지 로딩 즉시 멈추기

HTML DOM의 window.stop() 메서드는 브라우저 상단의 '중지' 버튼을 직접 클릭하지 않고도 현재 창(Window)에서 진행 중인 리소스 로딩을 즉시 중단할 수 있는 기능을 제공합니다. 예를 들어, 사용자 인증에 실패했거나 특정 조건이 충족되지 않았을 때 페이지가 불필요하게 계속 로딩되는 것을 막고 싶다면 이 메서드를 활용하면 됩니다.

문법(Syntax)

window.stop() 메서드의 기본 문법은 다음과 같습니다.

window.stop()

이 메서드는 별도의 매개변수를 받지 않으며 반환값도 없습니다. 호출되는 즉시 해당 창의 모든 로딩 작업이 중단됩니다.

예제

다음은 HTML DOM Window stop() 메서드를 실제로 활용하는 예제입니다. 입력 필드에 'admin'이라는 이름이 입력되면 새 자식 창을 열고, 그렇지 않으면 window.stop()을 호출하여 현재 페이지의 로딩을 중단합니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window stop()</title>
<style>
    * {
        padding: 2px;
        margin: 5px;
    }
    form {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Window-stop( )</legend>
            <input id="urlSelect" type="url" placeholder="Type URL here..."><br>
            <input id="textSelect" type="text" placeholder="Full Name"><br>
            <input type="button" value="Go To" onclick="openWindow()">
            <input type="button" value="Close" onclick="closeWindow()">
            <input type="button" value="Restore" onclick="restoreWindow()">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var urlSelect = document.getElementById("urlSelect");
        var textSelect = document.getElementById("textSelect");
        var winSource;
        function openWindow() {
            if(textSelect.value === 'admin'){
                browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height=200");
                winSource = urlSelect.value;
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Active";
            } else {
                window.stop();
                document.getElementById("divDisplay").textContent = "Child Window Stopped";
            }
        }
        function closeWindow(){
            if(browseWindow){
                browseWindow.close();
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Closed";
            }
        }
        function restoreWindow(){
            if(browseWindow.closed){
                browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Restored";
            }
        }
    </script>
</body>
</html>

동작 원리

위 코드의 핵심 로직은 openWindow() 함수 안에 있습니다.

이름이 'admin'인 경우: window.open()으로 지정한 URL의 자식 창을 열고, 화면에는 "Child Window Active"라는 메시지가 표시됩니다.
이름이 'admin'이 아닌 경우: window.stop()이 실행되어 현재 창의 리소스 로딩이 즉시 중단되며, "Child Window Stopped"라는 메시지가 표시됩니다.

또한 closeWindow()로 열린 창을 닫고, restoreWindow()로 닫힌 창을 다시 복원할 수 있어 자식 창의 생명 주기를 전체적으로 관리하는 구조입니다.

출력 결과

'Go To' 버튼을 클릭했을 때 허가되지 않은 이름(Full Name)이 입력된 경우 −

HTML DOM Window stop() 메서드 – 브라우저 중지 버튼 없이 페이지 로딩 즉시 멈추기

'Go To' 버튼을 클릭했을 때 올바른 이름(admin)이 입력된 경우 −

HTML DOM Window stop() 메서드 – 브라우저 중지 버튼 없이 페이지 로딩 즉시 멈추기

참고 사항

window.stop()은 Internet Explorer를 제외한 대부분의 주요 브라우저(Chrome, Firefox, Safari, Edge 등)에서 지원됩니다.
이 메서드는 <script> 태그 내에서만 호출할 수 있으며, 이미 로딩이 완료된 페이지에는 영향을 주지 않습니다.
브라우저의 중지 버튼을 누르는 것과 동일한 효과를 가지므로, 대용량 이미지나 광고 스크립트 등 불필요한 리소스 로딩을 강제로 차단해야 하는 상황에서 유용하게 사용됩니다.