웹브라우저 JavaScript

Location 객체

Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티다. 이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.

현재 윈도우의 URL 알아내기

아래는 현재 윈도우의 문서가 위치하는 URL을 알아내는 방법이다.

console.log(location.toString(), location.href);

URL Parsing

location 객체는 URL을 의미에 따라서 별도의 프로퍼티로 제공하고 있다. 

console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)

URL 변경하기

아래 코드는 현재 문서를 http://egoing.net으로 이동한다.

location.href = 'http://egoing.net';

아래와 같은 방법도 같은 효과를 낸다.

location = 'http://egoing.net';

아래는 현재 문서를 리로드하는 간편한 방법을 제공한다.

location.reload();

 

댓글

댓글 본문
작성자
비밀번호
  1. 미완성
    20190108
  2. JuicyFresh
    감사합니다.
  3. SlowStarter
    감사합니다!
  4. 스페이스몽키
    감사합니다~!
  5. 생선과고양이
    20180424 감사합니다
  6. Hun Chang
    중간에 좀 쉬기도 했었고 슬슬 복습겸 스스로 실습을 하지 않으면 안되는 느낌이네요.
  7. An TaeHyeon
    18-01-24 수강완료.
    강의록 공유합니다!
    https://goo.gl/PsQfVV
  8. 박인호
    12-27
    수강완료.
  9. 수복
    감사합니다. 조금 헷가리네용.
  10. Sangmook Kim
    170727 완료
  11. 하니
    현재 창에서 port 값이나 hash 값이 없는 거 아닐까요?
    대화보기
    • 봉보로봉
      첫번째 영상에서 나왔던 console.log(location.port) 와 console.log(location.hash) 이 undefined 으로 나오네요.
      무엇이 문제인지 잘 모르겠습니다.
    • crable
      감사합니다
    • BANIP
      로케이션은 사이트의 정보를 알아내는 기능만 있는줄 알았는데
      해당 프로퍼티를 다른값으로 바뀌면 실제로 주소창도 바뀌는군요..

      메서드 정리 // 프로토콜 취득 => .protocol / 도메인 취득 => .host / 하위 디렉터리 취득 => .pathname / get방식의 http 요청 파라미터 가져오기 => .search / 문서에 정의해놓은 위치 가져오기 => .hash
    • matheios
      감사합니다~
    • 김범석
      단축키 쓰신게 아닌가 생각됩니다.

      html 을 타이핑 하신 후 Ctrl + Space 눌러보시면 되실거에요.
      대화보기
      • 베니
        강의에서 sublime 에 html 입력하면 자동으로 HTML5 form이 입력이 됐는데 무슨 패키지인가요??
      • 폭스킴
        http://egoing.net은 없어졌나요?
      • rteterter
        대화보기
        • rteterter
          대화보기
          • 히스토
            감사합니다 ^^
          • 유유
            감사합니다.
          • 감사합니다~!
          • hyuna
            감사합니다.
          • tachyon
            감사합니다
          • tachyon
            감사합니다
          • yihsang
            감사합니다.
          • JustStudy
            22016.07.07목
            고맙습니다 3.
          • JustStudy
            2016. 06. 30
            고맙습니다 2.
          • 부지런한곰탱이
            감사합니다아ㅏ아아아아!!!
          • 이주환
            2016. 04. 27
            잘보고갑니다~!
            reload 메서드는 필요한경우가 생길 수 있으니 체크해두세요~
          • JustStudy
            고맙습니다
          • Bono
            함수가 호출되었을때 reload가 됩니다.
            시간이 지나면 자동으로 reload가 되게 하는건 시간을 설정해서
            함수를 호출하면 되는데요. setTimeout()과 같은 매서드를 활용하시면 됩니다.
            대화보기
            • Bono
              괜찮던데요
              대화보기
              • Moon Hee Bae
                이렇게 해 보세요.~~ 이벤트 헨들러 등록은 function을 만들어서 넘겨줘야 하는거죠~~ [C의 함수포인터, C#의 delegate처럼 가지고 있지 않을까 싶네요.] JS는 내부 동작을 잘 몰라서... ^^;;;; 암튼... 저도 강의 보면서 공부중이라 세부적인것을 설명드리기는 무리이고 저렇게 하면 잘 동작되네용~~ ^^

                //--------------------------------------------------------------
                <input type="button" value="Reload" id="RL" />
                <script>
                var reload = document.getElementById('RL');
                reload.addEventListener('click', function(){
                location.reload()
                //location.href="http://localhost";
                }
                );
                </script>
                대화보기
                • SK Kim
                  버튼 누르면 사이트로 가거나 리로드 구현할려고 하니..이상하게 동작하네요.

                  <input type="button" value="Reload" id="RL" />
                  <script>
                  var reload = document.getElementById('RL');
                  reload.addEventListener('click', location.reload());
                  </script>

                  다음과 같이 하면 정상으로 동작합니다.
                  <input type="button" value="Reload" id="RL" onclick="location.reload()" />
                • 박첩구드
                  감사합니다!
                • 박고잉
                  으악 강의 듣다가 유알엘 변경코드 치니까 도중에 딴데로 나가져 버림 ㅠㅠ
                • 쥬슈야
                  이번 강좌에서 가장 중요한 내용은 egoing님의 블로그 주소를 알아 냈다는 점입니다. +_+
                  http://egoing.net
                • 코딩!
                  감사합니다
                • suekim0419
                  요청이나 문의 사항은 발전적인 내용으로 올립시다.
                  투정부리는건 엄마한테 하세요. 비용하나 안내고 들으면서 무슨 지적을 하는건지..
                • SeungJu Lee
                  안녕하세요. 이고잉님 잘 보고 있습니다.
                  혹시 location.reload를 조건 없이 입력하면 무한 리로드에 걸리지 않나요?
                • 유기농브래드
                  감사히 잘 듣고 있습니다. 컨텐츠를 어떻게 만들어낼까 굉장히 고심하신 흔적을 볼 수 있습니다.
                  그리고, 1.5배속으로 듣고 있는데요~ 아주 좋습니다!!
                  넘 감사해서 egoing 님 뵐수 있는 행운의 기회가 있다면, 맛있는 밥 대접해드리고 싶습니다.
                • kmax95@naver.com
                  저도 fun님의 댓글에 동의 합니다.
                  대화보기
                  • 조천희
                    감사해요^^
                  • 민팀장
                    강의 참 좋아요..
                  • 수림
                    질문이 있습니다. location.reload(); 라는 명령어를 html에 자바로 넣어주는거죠? 만약 그렇다면 자동적으로 reload가 되는건가요?? 시간이 지나면 새로고침되는 네이버처럼 되는건가요??
                  • hapsody
                    목소리가 너무 좋으세요
                    귀에 쏙쏙 박히네요 ㅋㅋ
                  • 오픈튜토리얼의 온라인 강의가 도움이 많이 되고 있습니다
                    기본기를 훌륭하게 다질 수 있는 간략하고도 쉬운 강의에
                    하나하나 들을때마다 감사한 마음 잊지않고 있습니다
                    항상 수고많으십니다 이고잉님
                  • linus
                    좋은 강의 감사합니다.
                    밑의 글을 보고 한글 적어봅니다.
                    저는 자바스크립트를 짧은 시간에 훓어주는 좋은 강의라고 생각합니다.
                    동영상 하나하나의 길이도 짧아서 전혀 지루하지 않고요.
                    강의에 대해 지적해주는 건 개인의 의견이라고 볼 수 있지만,
                    수업의 범위를 넘어간다고 언급을 아예 하지 말라고 지적하는 건 좋지 않은 것 같습니다.
                    이 수업을 듣고 자바스크립트의 모든 것을 알 수 있을거라 생각하신 분은 없을 것입니다.
                    이 수업을 듣다가 더 궁금하고 부족하다고 느낀 분들은 강의를 듣다가 전문서적을 찾게 될 텐데,
                    범위를 넘어간다는 말씀을 들을 때 그것에 대한 힌트가 되지 않을까 싶습니다.
                    아무리 좋은 강의를 듣는다고 해도 듣는 사람의 준비가 되어있지 않은 건,
                    강의를 해주는 분도, 강의를 듣는 분도 모두 힘빠지는 일이 아닌가 싶습니다.
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기