HTML의 window.name 속성은 현재 브라우저 창(윈도우)의 이름을 가져오거나 새로 설정할 수 있는 속성입니다. 자바스크립트 한 줄만으로 창에 고유한 이름을 부여하거나 기존 이름을 손쉽게 조회할 수 있어, 팝업 창 제어나 창 간 통신 등 다양한 상황에서 활용됩니다.
문법(Syntax)
window.name 속성의 기본 사용 문법은 다음과 같습니다.
1. 창 이름 가져오기
window.name
2. 창 이름 설정하기
window.name = "text"
그럼 실제 동작 예제를 통해 HTML Window name 속성이 어떻게 작동하는지 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML Window name 속성 데모</h1>
<button onclick="display()" class="btn">창 이름 보기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = '현재 창 이름: ' + window.name;
}
</script>
</body>
</html>
실행 결과(Output)
예제를 실행하면 그라데이션 배경 화면에 “창 이름 보기” 버튼이 나타납니다. 이 버튼을 클릭하면 현재 브라우저 창의 이름이 아래 영역에 출력됩니다.
window.name 속성의 주요 특징
- 기본값은 빈 문자열("")이며, 별도로 설정하지 않으면 아무 값도 반환되지 않습니다.
- 설정된 창 이름은 같은 탭에서 다른 페이지로 이동하더라도 유지됩니다.
- 문자열만 저장할 수 있으며, 숫자나 객체 등 다른 타입의 값을 할당하면 자동으로 문자열로 변환됩니다.
- window.open()으로 열린 팝업 창의 이름을 지정하거나, 창을 식별하는 용도로 널리 사용됩니다.