분류 javascript

window.location Cheatsheet

컨텐츠 정보

  • 조회 392 (작성일 )

본문

DOM의 window.location 객체에서 사용할 수 있는 대부분의 메소드와 속성을 다루는 분석입니다.


Cover image for window.location Cheatsheet 


사이트의 URL 정보를 찾으면 window.location 객체가 적합합니다! 속성을 사용하여 현재 페이지 주소에 대한 정보를 얻거나 해당 메서드를 사용하여 페이지 리디렉션 또는 새로 고침을 수행합니다.?


https://dev.to/samanthaming/window-location-cheatsheet-4edl 


https://www.samanthaming.com/tidbits/?filter=JS#2 


window.location.origin    'https://www.samanthaming.com'
               .protocol  'https:'
               .host      'www.samanthaming.com'
               .hostname  'www.samanthaming.com'
               .port      ''
               .pathname  '/tidbits/'
               .search    '?filter=JS'
               .hash      '#2'
               .href      'https://www.samanthaming.com/tidbits/?filter=JS#2'
window.location.assign('url')
               .replace('url')
               .reload()
               .toString()

window.location 속성 


 window.location

Returns 

.origin 

Base URL (Protocol + hostname + port number)

.protocol 

Protocol Schema (http: 또는 https:) 

.host 

Domain name + port

.hostname 

Domain name 

.port 

Port Number 

.pathname 

The initial '/' followed by the Path 

.search 

? followed by Query String 

.hash 

# followed by the Anchor or Fragment identifier 

.href 

Full URL 


호스트와 호스트 이름의 차이점 


위의 예에서 host 및 hostname이 값을 반환한다는 것을 알 수 있습니다. 왜 이런 속성을 사용합니까? 글쎄, 그것은 포트 번호와 관련이 있습니다. 한 번 보자.


포트가 없는 URL 


https://www.samanthaming.com 


window.location.host; // 'www.samanthaming.com'
window.location.hostname; // 'www.samanthaming.com'

window.location.port; // ''


포트가 있는 URL 


https://www.samanthaming.com:8080 


window.location.host; // 'www.samanthaming.com:8080'
window.location.hostname; // 'www.samanthaming.com'

window.location.port; // '8080'

따라서 host는 포트 번호를 포함하지만 hostname은 호스트 이름만 반환합니다.


URL 속성을 변경하는 방법 


이러한 위치 속성을 호출하여 URL 정보를 검색 할 수 있습니다. 새 속성을 설정하고 URL을 변경하는 데 사용할 수 있습니다. 무슨 뜻인지 봅시다.


// START 'www.samanthaming.com'

window.location.pathname = '/tidbits'; // Set the pathname

// RESULT 'www.samanthaming.com/tidbits'

변경할 수 있는 전체 속성 목록은 다음과 같습니다.


// Example
window.location.protocol = 'https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'query string' // (you don't need to pass ?)
               .hash     = 'hash' // (you don't need to pass #)
               .href     = 'url'


설정할 수 없는 유일한 속성은 window.location.origin입니다. 이 속성은 읽기 전용입니다.


Location Object 


window.location은 Location 객체를 반환합니다. 페이지의 현재 위치에 대한 정보를 제공합니다. 그러나 여러 가지 방법으로 Location 객체에 액세스 할 수도 있습니다.


window.location           Location
window.document.location  Location
document.location         Location
location                  Location


우리가 할 수 있는 이유는 이것이 브라우저의 전역 변수이기 때문입니다.


Alt Text 


window.location vs location 


이러한 4 가지 속성은 모두 동일한 Location 객체를 가리킵니다. 나는 개인적으로 window.location을 선호하며 실제로 위치 사용을 피할 것입니다. 주로 위치는 일반적인 용어처럼 읽히고 누군가 실수로 전역 변수를 재정의 하는 변수 이름을 지정할 수 있기 때문입니다. 예를 들어 보자.


// https://www.samanthaming.com

location.protocol; // 'https'

function localFile() {
  const location = '/sam';

  return location.protocol;
  // ❌ undefined
  //    b/c local "location" has override the global variable
}


대부분의 개발자는 window가 전역 변수라는 것을 알고 있습니다. 따라서 혼동을 일으킬 가능성이 줄어 듭니다. 솔직히 말해서, 나는 이 글을 쓸 때까지 location가 전역 변수라는 것을 전혀 몰랐습니다?. 그래서 내 권장 사항은 보다 명확하고 window.location을 대신 사용하는 것입니다.?


내 개인적인 취향 순서는 다음과 같습니다.


// ✅
1. window.location   // ?
2. document.location

// ❌
3. window.document.location //  why not just use #1 or #2 ?
4. location // feels too ambiguous ?


물론 이것은 단지 내가 선호하는 것입니다. 당신은 코드베이스의 전문가이고 최선의 방법은 없습니다. 

최선의 방법은 항상 당신과 당신의 팀에 가장 잘 맞는 방법입니다 ? 


window.location Methods 


 window.location

 

 .assign()

 주어진 URL로 이동

 .replace()

 지정된 URL로 이동하고 세션 기록에서 현재 페이지를 제거합니다.

 .reload()

 현재 페이지를 새로 고침

 .toString()

 URL을 반환


window.location.toString 


MDN의 정의는 다음과 같습니다.


이 메소드는 URL의 USVString을 리턴합니다. Location.href의 읽기 전용 버전입니다.


즉,이 값을 사용하여 href 값을 가져올 수 있습니다.


// https://www.samanthaming.com

window.location.href; // https://www.samanthaming.com
window.location.toString(); // https://www.samanthaming.com


어느 쪽을 사용해야 하는지에 대해 더 많은 정보를 찾을 수 없었습니다. 그러나 그렇게 한다면, 이것에 PR을 제출하십시오. 그러나 차이점에 대한 성능 테스트를 찾았습니다.


JSPerf: Location toString vs Location href


이 속도 테스트에 대해 주목하고 싶은 것은 브라우저마다 다르다는 것입니다. 브라우저와 버전에 따라 결과가 다릅니다. Chrome을 사용하고 있으므로 href가 나머지보다 빠릅니다. 이것이 제가 사용할 것입니다. 또한 toString()보다 더 명시적으로 읽습니다. href가 URL을 제공하는 반면 toString은 문자열로 변환되는 것처럼 보입니다?.


assign vs replace 


이 두 가지 방법 모두 다른 URL로 리디렉션하거나 탐색하는 데 도움이 됩니다. 차이점은 할당은 현재 페이지를 기록에 저장하므로 사용자는 "뒤로"버튼을 사용하여 해당 페이지로 이동할 수 있습니다. replace 방법을 사용하면 저장되지 않습니다. 혼란스러운가? 문제 없습니다. 나도 마찬가지였습니다. 예를 들어 봅시다.


Assign 


1. Open a new blank page
2. Go to www.samanthaming.com (current page)

3. Load new page ? `window.location.assign('https://www.w3schools.com')`
4. Press "Back"
5. Returns to ? www.samanthaming.com


Replace 


1. Open a new blank place
2. Go to www.samanthaming.com (current Page)

3. Load new page ? `window.location.replace('https://www.w3schools.com')`
4. Press "Back"
5. Return to ? blank page

Current Page 


정의에서 "현재 페이지"를 강조하기 만하면 됩니다. assign 또는 replace를 호출하기 직전의 페이지입니다.


1. Open a new blank place
2. Go to www.developer.mozilla.org
3. Go to www.samanthaming.com ? this is the current Page
4. window.location.assign('https://www.w3schools.com'); // Will go to #3
4. window.location.replace('https://www.w3schools.com'); // Will go to #2


페이지 리디렉션을 수행하는 방법 


이제, =를 사용하여 값을 할당하여 window.location의 속성을 변경할 수 있다는 것을 알고 있습니다. 마찬가지로 일부 작업을 수행하기 위해 액세스 할 수 있는 방법이 있습니다. 따라서 "다른 페이지로 리디렉션 하는 방법"과 관련하여 세 가지 방법이 있습니다.


// Setting href properties
window.location.href = 'https://www.samanthaming.com';

// Using Assign
window.location.assign('https://www.samanthaming.com');

// Using Replace
window.location.replace('https://www.samanthaming.com');


replace vs assign vs href


세 가지 모두 리디렉션되지만 브라우저 기록과 차이가 있습니다. href와 assign은 여기에서 동일합니다. 현재 페이지를 기록에 저장하지만 대체는 하지 않습니다. 따라서 탐색을 시작 페이지로 되돌릴 수 없는 환경을 만들려면 replace ?을 사용하십시오.


이제 질문은 href 대 assign입니다. 나는 이것이 개인적 취향에 올 것이라고 생각합니다. 할당 방법이 더 좋기 때문에 할당을 더 좋아합니다. 따라서 액션을 수행하는 것처럼 느껴집니다. 또한 테스트하기가 쉽다는 추가 보너스가 있습니다. 나는 많은 Jest 테스트를 작성 해 왔으므로 메소드를 사용하면 조롱하기가 더 쉽습니다.


window.location.assign = jest.fn();

myUrlUpdateFunction();

expect(window.location.assign).toBeCalledWith('http://my.url');


Credit StackOverflow: @kieranroneill:


그러나 그 때문에 href가 페이지 리디렉션을 수행합니다. 성능 테스트를 통해 내 Chrome 버전에서 실행하는 것이 더 빠릅니다. 브라우저와 다른 버전으로 성능 테스트 범위를 다시 설정하면 지금은 더 빠를 수 있지만 향후 브라우저에서는 장소가 바뀔 수 있습니다.


JSPerf: href vs assign