JavaScript의 location.protocol 속성은 현재 페이지 URL의 프로토콜(protocol)을 가져오거나 설정하는 데 사용되는 Location 객체의 속성입니다.
이 속성을 읽으면 http:, https:, file:처럼 콜론(:)까지 포함된 문자열이 반환되며, 값을 할당하면 해당 프로토콜로 URL을 변경할 수 있습니다. 보안 검사나 HTTP/HTTPS 여부 판별 등에 유용하게 활용됩니다.
location.protocol 기본 문법
// 프로토콜 가져오기 let proto = location.protocol; // 프로토콜 설정하기 location.protocol = "https:";
예제 코드
다음은 버튼을 클릭하면 현재 URL의 프로토콜을 화면에 표시해 주는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<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;
}
.result {
font-weight: 500;
font-size: 18px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript의 Location protocol 속성</h1>
<div class="result"></div>
<button class="Btn">여기를 클릭하세요</button>
<h3>위 버튼을 클릭하면 현재 URL의 프로토콜을 확인할 수 있습니다.</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "현재 URL 프로토콜 = " + location.protocol;
});
</script>
</body>
</html>실행 결과
페이지를 처음 열었을 때의 화면입니다.
'여기를 클릭하세요' 버튼을 클릭하면 아래와 같이 현재 URL의 프로토콜이 출력됩니다.
정리
- location.protocol은 현재 URL의 프로토콜을 문자열로 반환합니다(예:
https:). - 값을 새로 할당하면 지정한 프로토콜로 페이지가 다시 로드될 수 있습니다.
- HTTP와 HTTPS 구분, 보안 컨텍스트 확인 등에 자주 사용됩니다.