자바스크립트로 현재페이지 url 가져오는방법과 window.location 사용방법에 대해 간략하게 정리했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Page URL Example</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>현재 페이지 URL 정보</h1>
<div id="fullUrl"></div>
<div id="protocol"></div>
<div id="host"></div>
<div id="hostname"></div>
<div id="port"></div>
<div id="pathname"></div>
<div id="search"></div>
<div id="hash"></div>
<script>
// 현재 페이지의 전체 URL을 가져오거나 설정합니다. ex: http://example.com/myapp/mypage.jsp?param1=value1¶m2=value2
document.getElementById("fullUrl").innerText = "전체 URL: " + window.location.href;
// URL의 프로토콜(스킴)을 가져오거나 설정합니다. 프로토콜 뒤의 콜론(:)도 포함됩니다. ex: http: 또는 https:
document.getElementById("protocol").innerText = "프로토콜: " + window.location.protocol;
// URL의 호스트 이름과 포트 번호를 가져오거나 설정합니다. ex : example.com:8080
document.getElementById("host").innerText = "호스트와 포트: " + window.location.host;
// URL의 호스트 이름을 가져오거나 설정합니다. ex : example.com
document.getElementById("hostname").innerText = "호스트 이름: " + window.location.hostname;
// URL의 포트 번호를 가져오거나 설정합니다. ex : 8080
document.getElementById("port").innerText = "포트 번호: " + window.location.port;
// URL의 경로를 가져오거나 설정합니다. ex : /myapp/mypage.jsp
document.getElementById("pathname").innerText = "경로: " + window.location.pathname;
// URL의 쿼리 문자열을 가져오거나 설정합니다. 물음표(?)도 포함됩니다. ex: ?param1=value1¶m2=value2
document.getElementById("search").innerText = "쿼리 문자열: " + window.location.search;
</script>
</body>
</html>
페이지 이동과 페이지 새로고침도 있다.
//페이지 이동
window.location.href = "http://example.com/newpage.jsp";
//페이지 새로 고침
window.location.reload();'JavaScript > JavaScript😊' 카테고리의 다른 글
| [JavaScript] csv파일로 html table 만들기 (1) | 2022.10.25 |
|---|---|
| [JavaScript] input 에서 숫자만 입력되게 설정 (0) | 2022.05.12 |
| [JavaScript] 날짜구하는 함수만들기 (0) | 2021.09.01 |
| [WEB] 쿠키와 세션 차이 및 JS에서의 사용법 (0) | 2021.02.02 |
| [JavaScript] 동적으로 바뀌는 Date(연도, 월) (0) | 2020.10.18 |
