생활코딩

Coding Everybody

Location 객체

토픽 생활코딩 > 클라이언트 > JavaScript > 웹브라우저 자바스크립트

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. 주황버섯
    23.02.18 수강완료
  2. 헤밍웨이
    220825 location!
  3. 진진리
    0816
  4. 임앤강
    2022-02-07 완료~
  5. pmxsg
    2021.12.20 수강
  6. 드림보이
    2021.12.16. Location 객체 파트 수강완료
  7. 경이
    211109 완료
    감사합니다
  8. Jeong Lily
    완료!
  9. labis98
    20210905 좋은 강의 감사합니다.
  10. gkalsdlf
    ㅇㄹ
  11. psmqdt
    egoing.net 에 가보니 엉뚱하게도 detox 관련 페이지가 뜨는 군요. 너무 느려 더 이상 뭐하는 곳인지는 알기 힘듭니다.
  12. 박병진
    2020.12.02 완료
  13. 현미쓰
    11/16 복습 ㅎ.ㅎ
  14. 11/13
  15. nurunzii
    완료
  16. anne
    완료
  17. 정승옥
    완료
  18. 김진욱
    완료
  19. 한강
    location 객체 잘 배웠습니다.
    오늘도 감사합니다~~^^!
    200624
  20. 쑤우
    완료. 감사합니다.
  21. Useok
  22. ㅎㅅㅁ
    200203 다시시작
  23. guest
    2020/01/31 DONE
  24. 2019-10-13 8:29pm 완료
  25. 정홍
    완료
  26. 싸커홍
    수강완료
  27. 류석현
    수강완료!
  28. 미완성
    20190108
  29. JuicyFresh
    감사합니다.
  30. SlowStarter
    감사합니다!
  31. 스페이스몽키
    감사합니다~!
  32. 생선과고양이
    20180424 감사합니다
  33. Hun Chang
    중간에 좀 쉬기도 했었고 슬슬 복습겸 스스로 실습을 하지 않으면 안되는 느낌이네요.
  34. An TaeHyeon
    18-01-24 수강완료.
    강의록 공유합니다!
    https://goo.gl/PsQfVV
  35. 박인호
    12-27
    수강완료.
  36. 수복
    감사합니다. 조금 헷가리네용.
  37. Sangmook Kim
    170727 완료
  38. 하니
    현재 창에서 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
          대화보기
          • 히스토
            감사합니다 ^^
          • 유유
            감사합니다.
          • 감사합니다~!