HTML DOM defaultView 속성 – 문서에 연결된 window 객체 반환하기

HTML DOM defaultView 속성은 현재 창에서 열려 있는 문서와 연결된 window 객체를 반환하는 데 사용됩니다. 이 속성을 활용하면 해당 문서가 표시된 브라우저 창의 위치나 이름 같은 다양한 정보에 쉽게 접근할 수 있습니다.

구문

defaultView 속성의 기본 구문은 다음과 같습니다.

document.defaultView

예제

다음 예제를 통해 HTML DOM defaultView 속성이 실제로 어떻게 동작하는지 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>defaultView Property example</h2>
<p>Click the below button to get information about the window</p>
<button onclick="winInfo()">Window Info</button>
<p id="Sample"></p>
<script>
    function winInfo() {
        var win = document.defaultView;
        var top = win.screenTop;
        var left = win.screenLeft;
        var name = win.name;
        document.getElementById("Sample").innerHTML = "Distance from screen top: " + top + "<br> Distance from screen left: "+left+"<br> Window name: "+name;
    }
</script>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM defaultView 속성 – 문서에 연결된 window 객체 반환하기

Window Info 버튼을 클릭하면 아래와 같이 창 관련 정보가 표시됩니다.

HTML DOM defaultView 속성 – 문서에 연결된 window 객체 반환하기

코드 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

먼저 사용자가 클릭하면 winInfo() 함수를 실행하는 "Window Info" 버튼을 생성했습니다.

<button>Window Info</button>

winInfo() 함수는 document의 defaultView 속성을 사용해 현재 문서의 window 객체를 가져온 뒤 win 변수에 할당합니다. 이어서 window 객체의 screenTop, screenLeft, name 속성 값을 각각 top, left, name 변수에 저장합니다.

screenLeft와 screenTop은 각각 브라우저 창이 화면의 왼쪽 가장자리와 위쪽 가장자리에서 얼마나 떨어져 있는지를 픽셀 단위로 나타냅니다. name 속성은 창의 이름을 반환하며, 별도로 지정하지 않으면 null을 반환할 수 있습니다.

function winInfo() {
    var win = document.defaultView;
    var top = win.screenTop;
    var left = win.screenLeft;
    var name = win.name;
    document.getElementById("Sample").innerHTML = "Distance from screen top: " + top + "<br> Distance from screen left: "+left+"<br> Window name: "+name;
}

참고 사항

defaultView 속성은 대부분의 최신 브라우저에서 지원되며, iframe 내부의 문서에서 호출하면 해당 프레임의 window 객체를 반환합니다. 특히 window.getComputedStyle() 메서드와 함께 사용하면 요소의 계산된 스타일을 조회할 때 유용하게 활용할 수 있습니다.