웹브라우저 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. 2019-10-13 8:29pm 완료
  2. 정홍
    완료
  3. 싸커홍
    수강완료
  4. 류석현
    수강완료!
  5. 미완성
    20190108
  6. JuicyFresh
    감사합니다.
  7. SlowStarter
    감사합니다!
  8. 스페이스몽키
    감사합니다~!
  9. 생선과고양이
    20180424 감사합니다
  10. Hun Chang
    중간에 좀 쉬기도 했었고 슬슬 복습겸 스스로 실습을 하지 않으면 안되는 느낌이네요.
  11. An TaeHyeon
    18-01-24 수강완료.
    강의록 공유합니다!
    https://goo.gl/PsQfVV
  12. 박인호
    12-27
    수강완료.
  13. 수복
    감사합니다. 조금 헷가리네용.
  14. Sangmook Kim
    170727 완료
  15. 하니
    현재 창에서 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님의 댓글에 동의 합니다.
                  대화보기
                  • 조천희
                    감사해요^^
                  • 민팀장
                    강의 참 좋아요..
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기