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

Was this helpful?