[생활코딩][웹브라우저JS]- Location 객체

 

Location 객체

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

  ---

현재 윈도우의 URL알아내기 

▶2가지 방법

1. location.toString() 
   • alert(location) 을 해도 해당 페이지의 URL이 뜹니다. console.log(location)을 하면 로케이션 객체에 대한 정보를 보여주지만 alert의 경우 인자값으로 String을 받기 때문에 1번의 방법과 같은 의미라고 생각하시면 됩니다.
2. location.href  // href 가 좀 더 선호되어 사용됩니다. 

URL Parsing

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

-> URL을 의미에 따라서 조각조각 가져오는 것이 필요할 때 

 

• location.protocol //현재 페이지의 통신규약을 알 수 있다

 //https://opentutorials.org/module/904/6634 라는 주소가 있을 때 
console.log(location.protocol);
      //output: https: 에 해당

• location.host //브라우저가 있고 서버가 있을 때 개인(컴퓨터)을 식별하는 주소가 host 입니다. = 도메인

 //https://opentutorials.org/module/904/6634 라는 주소가 있을 때 
console.log(location.host);​
// output: opentutorials.org 에 해당

 

• location.port // 컴퓨터에서 돌아가는 여러 소프트웨어들을 식별하는 것

 console.log(location.port);
      //output: 5500
      //port를 사용할 경우에만 뜸

 

• location.pathname // 웹서버의 정보 중에 구체적인 정보를 나타냅니다.

 //https://opentutorials.org/module/904/6634 라는 주소가 있을 때 
 console.log(location.pathname);
 //output: /module/904/6634​

• location.search //물음표 뒤에 따라오는 정보 , 해당 페이지(서비스,어플리케이션)에 전달된 값을 표시해줌
• location.hash // 위치를 표시하는 식별자 또는 북마크를 원할 때 사용

 

URL 변경하기 

• location 객체를 통하면 현재 웹페이지의 URL만 알아내는 것이 아니라 주소또한 바꾸고 리로드할 수 있다.
• 주소를 바꾸고 리로드 한다는 것의 의미는 도메인을 바꾼다는 것이 아니라 사용자를 다른 페이지의 주소로 이동시킨다는 것이다(리다이렉션). 
  • location.href = "이동할 URL"; // 아래의 코드와 같은 효과이지만 좀 더 명시적이기 때문에 선호됩니다. 
  • location ="이동할 URL";  // 위와 같은 효과

+ 현재 문서(웹페이지)를 리로드하는 간편한 방법(새로고침)

• location.reload(); // 선호되는 방법
• location.href = location.href; // 위의 코드와 같은 작동