Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript:URL로 이동:완전한 가이드

window.location 값은 브라우저에서 보고 있는 현재 URL을 나타냅니다. 이 값을 대체하여 JavaScript에서 다른 URL로 이동할 수 있습니다. 이것은 사용자를 다른 페이지로 리디렉션하려는 경우에 유용합니다. assign() 또는 replace() 메서드를 사용할 수도 있습니다.

사용자를 다른 웹 사이트 또는 업데이트된 경로 이름으로 리디렉션하려는 몇 가지 이유가 있습니다. 대부분의 경우 사용자의 승인에 따라 리디렉션할 수 있습니다. – 클라이언트가 사이트에 로그인했는지 여부. 이 기사에서는 JavaScript를 사용하여 웹 페이지에서 이를 수행하는 방법을 살펴봅니다.

JavaScript URL로 이동

JavaScript 브라우저 기록 API를 사용하면 새 URL로 이동할 수 있습니다. 다음 방법을 사용하여 새 URL로 이동할 수 있습니다.

  • window.location에 새 값 할당
  • window.assign() 메서드 사용
  • window.replace() 메서드 사용

이 세 가지 방법 모두 다른 URL로 동일하게 탐색한다는 목표를 달성합니다. 각각의 방법을 살펴보겠습니다.

자바스크립트 window.location 값

새 URL로 이동하려면 브라우저의 History API에서 위치 개체를 사용하십시오. 세션 기록을 사용하면 위치 개체를 새 URL에 다시 할당하거나 동일한 개체에서 href 속성을 사용할 수 있습니다.

이 접근 방식의 구문은 다음과 같습니다.

window.location = "url";

"url"은 사용자가 방문하기를 원하는 URL을 나타냅니다. 이 코드 줄이 실행되면 JavaScript 리디렉션이 시작됩니다. 이렇게 하면 사용자가 웹 브라우저에서 보는 페이지가 변경됩니다.

이 방법을 예제 형식으로 살펴보겠습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

const handleClick = (e) => {
      console.log("click")
      window.location = ('https://careerkarma.com') 
      // window.location.href = ('https://careerkarma.com')
      console.log(window.location)
    }

handleClick() 함수가 실행되면 코드가 JavaScript 콘솔에 명령문을 기록합니다. 그러면 코드가 새 URL로 리디렉션됩니다.

자바스크립트 window.location.assign()

위치 개체에는 assign()이라는 리디렉션 메서드가 있습니다. 이 메서드는 할당된 URL과 함께 현재 URL을 할당하고 기록 스택에 추가합니다.

방문 기록 스택은 귀하가 본 페이지를 나타냅니다(한 페이지로 돌아갈 수 있는 "뒤로 화살표"에 대해 생각해 보십시오).

다음 구문을 고려하십시오.

window.location.assign("url");

마지막 예제와 달리 JavaScript 변수(window.location)에 값을 할당할 필요가 없습니다. 대신 사용자가 보는 웹 페이지를 변경하는 방법을 사용합니다.

히스토리 스택은 브라우저가 뒤로 버튼이나 앞으로 버튼이 어디로 가야 하는지 기억하는 방법입니다.

이 방법의 전체 예를 살펴보겠습니다.

const handleClick = (e) => {
      console.log("click")
      window.location.assign('https://careerkarma.com');      
}

동일한 사이트의 다른 페이지로 리디렉션하려면 위치 개체의 경로 이름 속성을 사용하십시오.

const handleClick = (e) => {
      console.log("click")
      window.location.pathname = ('/newpage.html')
      console.log(window.location)
}

자바스크립트 window.location.replace()

사용자가 뒤로 버튼을 사용하여 이전 사이트로 돌아갈 수 있는지 여부를 제어하는 ​​기능이 있습니다.

replace() 메서드를 사용하여 사용자를 사이트로 이동하고 이전 페이지로 돌아가지 못하게 할 수 있습니다. 반면에 assign() 메서드는 브라우저 기록에서 이전에 본 페이지를 저장합니다. 따라서 assign()을 사용하여 마지막 페이지를 볼 수 있습니다.

replace() 메서드를 살펴보겠습니다.

window.location.replace("url");

assign()과 마찬가지로 replace()도 메서드입니다. 이 메소드는 하나의 인수(A 사용자를 가리키고 싶은 URL)를 허용합니다.

사용자 정의 함수와 함께 replace() 메소드를 사용하여 메소드가 실행될 때 사용자가 보는 URL을 변경할 수 있습니다.

const handleClick = (e) => {
      console.log("click")
      window.location.replace('https://careerkarma.com'); 
}

이 Repl.it을 사용하여 선택한 URL로 리디렉션하는 다양한 방법을 사용하십시오. 실행 버튼을 사용하여 코드를 기본값으로 재설정할 수 있습니다.

결론

JavaScript에서 URL로 이동하는 방법에는 window.location, window.location.assign() 메서드 또는 window.location.replace() 메서드의 세 가지가 있습니다.

JavaScript에 대해 더 알고 싶으십니까? JavaScript 학습 방법 가이드를 확인하십시오. 이 가이드에는 JavaScript를 배우는 방법에 대한 최고의 팁과 초보자 및 중급 개발자를 위한 포괄적인 학습 리소스 목록이 포함되어 있습니다.