Location 객체

Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티

URL 가져오기

윈도우의 문서 URL을 변경하거나 분서의 위치와 관련해서 다양한 정보를 얻을 수 있음
location.href : 현재 윈도우의 URL 알아내기
URL의 의미에 따라서 별도의 프로퍼티도 제공(location.protocol, location.host 등)
http://testurl.org:8080/home/1?id=123#hash
- http : protocol
- testurl.org : host
- :8080 : port
- /home/1 : pathname
- ?id=1 : search
- #hash : 북마크

<!DOCTYPE html>
<html lang="ko">
<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></title>
</head>
<body>
  <h1>Location 객체</h1>
  <h2>url전체(href)</h2>
  <script> 
    document.write(location.href);
  </script>
  <h2>protocol</h2>
  <script>
    document.write(location.protocol);
  </script>
  <h2>host</h2>
  <script>
    document.write(location.host);
  </script>
  <h2>port</h2>
  <script>
    document.write(location.port);
  </script>
  <h2>pathname</h2>
  <script>
    document.write(location.pathname);
  </script>
  <h2>search</h2>
  <script>
    document.write(location.search);
  </script>
  <h2>hash</h2>
  <script>
    document.write(location.hash);
  </script>
</body>
</html>

URL 변경하기

location.href 또는 location에 값을 대입하면 현재 웹페이지의 주소를 변경함
location.reload() : 페이지 새로고침

<!DOCTYPE html>
<html lang="ko">
<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></title>
</head>
<body>
  <input type="button" value="change" onclick="fn_clickHandler('change')">
  <input type="button" value="reload" onclick="fn_clickHandler('reload')">
  <script>
    function fn_clickHandler(value) {
      if(value === 'change') {
      // url 이동
        location.href = 'https://www.naver.com/'
      } else {
      // 페이지 새로고
        location.reload();
      }
    }
  </script>
</body>
</html>

Previous사용자와 커뮤니케이션 하기 NextNavigator 객체

Last updated 3 years ago

Was this helpful?

URL 가져오기

윈도우의 문서 URL을 변경하거나 분서의 위치와 관련해서 다양한 정보를 얻을 수 있음

location.href : 현재 윈도우의 URL 알아내기

URL의 의미에 따라서 별도의 프로퍼티도 제공(location.protocol, location.host 등)

http://testurl.org:8080/home/1?id=123#hash

http : protocol
testurl.org : host
:8080 : port
/home/1 : pathname
?id=1 : search
#hash : 북마크

<!DOCTYPE html>
<html lang="ko">
<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></title>
</head>
<body>
  <h1>Location 객체</h1>
  <h2>url전체(href)</h2>
  <script> 
    document.write(location.href);
  </script>
  <h2>protocol</h2>
  <script>
    document.write(location.protocol);
  </script>
  <h2>host</h2>
  <script>
    document.write(location.host);
  </script>
  <h2>port</h2>
  <script>
    document.write(location.port);
  </script>
  <h2>pathname</h2>
  <script>
    document.write(location.pathname);
  </script>
  <h2>search</h2>
  <script>
    document.write(location.search);
  </script>
  <h2>hash</h2>
  <script>
    document.write(location.hash);
  </script>
</body>
</html>

URL 변경하기

location.href 또는 location에 값을 대입하면 현재 웹페이지의 주소를 변경함

location.reload() : 페이지 새로고침

<!DOCTYPE html>
<html lang="ko">
<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></title>
</head>
<body>
  <input type="button" value="change" onclick="fn_clickHandler('change')">
  <input type="button" value="reload" onclick="fn_clickHandler('reload')">
  <script>
    function fn_clickHandler(value) {
      if(value === 'change') {
      // url 이동
        location.href = 'https://www.naver.com/'
      } else {
      // 페이지 새로고
        location.reload();
      }
    }
  </script>
</body>
</html>