JavaScript/javascript

location.href, location.assign, location.replace

BBB.OOO 2022. 9. 15. 14:03
반응형

window.location

window.location은 read-only 속성을 가졌으며, document의 현재 location 정보를 담은 Location 객체를 리턴해준다.

 

Location properties

  • [ Location.ancestorOrigins ] : 주어진 Location 객체와 연관된 document의 모든 조상 browsing context들이                                                                 역순으로 담긴 static한 DOMStringList이다.
  • [ Location.href ]: 전체 URL을 담고있는 USVString을 리턴하는 stringifier이다. 값이 바뀌면 연관된                                                            document는 새로운 페이지로 이동한다.
  • [ Location.protocol ] : URL의 프로토콜 스키마를 담고 있는 USVString]이다. (마지막 :를 포함한다.)
  • [ Location.host ] : host를 담고 있는 USVString이다. (:와 URL의 포트번호를 포함한다.)
  • [ Location.hostname ] : URL의 도메인을 담고 있는 USVString이다.
  • [ Location.port ] : URL의 포트 번호를 담고 있는 USVString이다.
  • [ Location.pathname ] : 최초 / 뒤에 나오는 path들을 담고 있는 USVString이다. 
  • [ Location.search ] : ? 를 포함하여 그 뒤에 나오는 URL의 파라미터나 querystring을 담은 USVString이다.                                                      모던 브라우저들은 querystring으로부터 parameter들을 쉽게 파싱할 수 있도록                                                              URLSearchParams나 URL.searchParams등을 제공해준다.
  • [ Location.hash ] : # 를 포함하여 뒤에 나오는 fragment 식별자를 담은 USVString이다.
  • [ Location.origin ] :  Read only - 대표 URL origin의 유니코드 직렬화를 담고 있는 USVString이다.

 

Location methods

  • [ Location.assign() ] : 파라미터로 전달한 URL에서 리소스를 로드한다.
  • [ Location.reload() ] : 리프레시 버튼과 같이 현재의 URL을 다시 로드한다.
  • [ Location.replace() ] : (파라미터로 전달된 URL로 리다이렉트하면서) 전달된 URL의 리소스로 현재의 리소스를                                              교체한다.
  • [ Location.toString() ] : 전체 URL을 담고 있는 USVString을 리턴한다. HTMLHyperlinkElementUtils.href 와                                                       동일한 기능이지만 값을 수정하기 위해 사용할 수는 없다

차이점

window.location.href 는 전체 URL 정보를 담고있으며 값이 변경됐을 때 변경된 URL 페이지로 이동한다.

window.location.assign 과 window.location.replace 는 메서드이며 새로운 URL 페이지로 이동하지만

히스토리 기록 여부 차이가 있다.

 

window.location.assign 메서드는 새로운 페이지로 이동하며 히스토리가 남아 뒤로가기 버튼을 통해 이전페이지로

이동이 가능하다.

하지만 window.location.replace 메서드는 새로운 페이지를 현재 페이지에 덮어 씌워 히스토리가 남지않아

이전페이지로 이동이 불가능하다.

 

window.location.href = 이동할 URL
window.location.assign(이동할 URL);
window.location.replace(이동할 URL)

 

window.location.href

  window.location.href
사용 방법 window.location.href = 이동할 URL
사용 예시 window.location.href = "https://www.naver.com";
타입 속성(Property)
기능 > 전체 URL 정보를 담고 있는 window.location 의 속성이다.
> assign() 메서드와 같이 페이지 이동을 시키며 히스토리가 남는다.
> 히스토리가 남아 뒤로가기 버튼을 통해 이전 페이지로 이동이 가능하다.

 

window.location.assign

  window.location.assign
사용 방법 window.location.assign(이동할 URL)
사용 예시 window.location.assign("https://www.naver.com")
타입 메서드(Function)
기능 > 파라미터로 전달된 URL 에서 리소스를 로드한다.
> 새로운 페이지로 이동하며 히스토리가 남는다.
> 히스토리가 남아 뒤로가기 버튼을 통해 이전 페이지로 이동이 가능하다.

 

window.location.assign

  window.location.replace
사용 방법 window.location.replace(이동할 URL)
사용 예시 window.location.replace("https://www.naver.com")
타입 메서드(Function)
기능 > 현재 페이지의 리소스를 파라미터로 전달된 URL 리소스로 교체한다.
> 현재 페이지를 이동할 URL의 페이지로 덮어 씌운다.
> 히스토리가 남지않아 뒤로가기 버튼을 통해 이전 페이지로 이동이 불가능하다.

 

반응형