웹브라우저 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. matheios
    감사합니다~
  2. 김범석
    단축키 쓰신게 아닌가 생각됩니다.

    html 을 타이핑 하신 후 Ctrl + Space 눌러보시면 되실거에요.
    대화보기
    • 베니
      강의에서 sublime 에 html 입력하면 자동으로 HTML5 form이 입력이 됐는데 무슨 패키지인가요??
    • 폭스킴
      http://egoing.net은 없어졌나요?
    • rteterter
      대화보기
      • rteterter
        대화보기
        • 히스토
          감사합니다 ^^
        • 유유
          감사합니다.
        • 감사합니다~!
        • 감사합니다.
        • tachyon
          감사합니다
        • tachyon
          감사합니다
        • yihsang
          감사합니다.
        • JustStudy
          22016.07.07목
          고맙습니다 3.
        • JustStudy
          2016. 06. 30
          고맙습니다 2.
        • 부지런한곰탱이
          감사합니다아ㅏ아아아아!!!
        • 이주환
          2016. 04. 27
          잘보고갑니다~!
          reload 메서드는 필요한경우가 생길 수 있으니 체크해두세요~
        • JustStudy
          고맙습니다
        • 함수가 호출되었을때 reload가 됩니다.
          시간이 지나면 자동으로 reload가 되게 하는건 시간을 설정해서
          함수를 호출하면 되는데요. setTimeout()과 같은 매서드를 활용하시면 됩니다.
          대화보기
          • 괜찮던데요
            대화보기
            • 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
                  좋은 강의 감사합니다.
                  밑의 글을 보고 한글 적어봅니다.
                  저는 자바스크립트를 짧은 시간에 훓어주는 좋은 강의라고 생각합니다.
                  동영상 하나하나의 길이도 짧아서 전혀 지루하지 않고요.
                  강의에 대해 지적해주는 건 개인의 의견이라고 볼 수 있지만,
                  수업의 범위를 넘어간다고 언급을 아예 하지 말라고 지적하는 건 좋지 않은 것 같습니다.
                  이 수업을 듣고 자바스크립트의 모든 것을 알 수 있을거라 생각하신 분은 없을 것입니다.
                  이 수업을 듣다가 더 궁금하고 부족하다고 느낀 분들은 강의를 듣다가 전문서적을 찾게 될 텐데,
                  범위를 넘어간다는 말씀을 들을 때 그것에 대한 힌트가 되지 않을까 싶습니다.
                  아무리 좋은 강의를 듣는다고 해도 듣는 사람의 준비가 되어있지 않은 건,
                  강의를 해주는 분도, 강의를 듣는 분도 모두 힘빠지는 일이 아닌가 싶습니다.
                • 좋은 강의해주시는 분 힘빠지게 굳이 나쁜부분만 언급하는것은 좋지 못하다고 봅니다.
                  사람마다 좋아하는 스타일은 다른것이니까요
                  당신은 시간과 노력을 들여서 이런 강의를 올리실 수 있습니까?
                • WhiteDoong
                  저도 같은 생각이긴 합니다. 하지만 무료이니;; 그냥 듣는수밖에요;; 이게 어딥니까 ㅜㅜ; ㅋ;
                  대화보기
                  • 팽맨이러닝
                    어떤 용어들이 수업의 범위를 넘어간다고 하면 아예 언급하지 않는게 어떨까 싶습니다.
                    아니면 간략하게 쉽게 설명이 되면 좋을 것 같고요.
                  • rootxy
                    쉬운 설명 감사합니다.
                  • egoing
                    수정했습니다! 감사합니다~
                    대화보기
                    • siluniv
                      멋진 목소리와 함께 강의 잘 보고 있습니다~

                      ...
                      사소하지만 오타 발견!
                      UML Parsing 부분에 locatoin 이라고 써있네요 ^^;;
                    • doctoru
                      쉽게 풀어서 강의해주셔서 이해가 잘됩니다^^
                    • ssong
                      감사합니다~~
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기