HTML의 window.self 속성은 브라우저에서 현재 실행 중인 창(Window) 객체 자신을 반환합니다. 이 속성은 window.top과 비교하여 현재 창이 최상위(topmost) 창인지 판별하는 용도로 자주 활용됩니다.
문법(Syntax)
window.self 속성의 기본 사용법은 다음과 같습니다.
window.self
아래 예제를 통해 HTML Window self 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 30%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show{
font-size:1.2rem;
}
</style>
<body>
<h1>HTML Window self 속성 데모</h1>
<button onclick="create()" class="btn">self 속성으로 현재 창이 최상위 창인지 확인하기</button>
<div class="show"></div>
<script>
function create(){
if(window.top === window.self){
document.querySelector('.show').innerHTML='현재 창은 최상위 창입니다';
} else{
document.querySelector('.show').innerHTML='현재 창은 최상위 창이 아닙니다';
}
}
</script>
</body>
</html>
실행 결과(Output)
화면에 표시된 “self 속성으로 현재 창이 최상위 창인지 확인하기” 버튼을 클릭하면, 현재 창이 최상위 창인지 여부가 결과 영역에 출력됩니다. 이를 통해 self 속성의 동작 원리를 쉽게 이해할 수 있습니다.
동작 원리 정리
위 예제의 핵심은 window.top === window.self 비교문입니다. window.top은 브라우저에서 가장 상위에 있는 창을 가리키고, window.self는 현재 코드가 실행되고 있는 창을 가리킵니다. 두 값이 같다면 현재 창이 곧 최상위 창이라는 의미이며, 다르다면 현재 페이지가 iframe처럼 다른 창 안에 포함되어 있다는 뜻입니다.