JavaScript의 상대 URL로 리디렉션

Shiv Yadav 2022년8월18일
JavaScript의 상대 URL로 리디렉션

웹사이트에서 페이지를 자주 리디렉션해야 할 수도 있습니다. 서버 측에서 웹 페이지와 URL을 전환하는 것이 좋지만 JavaScript를 사용하여 클라이언트 측에서 페이지를 리디렉션해야 하는 상황이 있을 수 있습니다.

이 튜토리얼에서 JavaScript를 사용하여 이동하는 방법을 알아보겠습니다.

JavaScript의 상대 URL로 리디렉션

jQuery와 같은 대부분의 JavaScript 라이브러리에는 웹 페이지를 리디렉션하는 미리 만들어진 기능이 있지만 일반 JavaScript를 사용하는 것이 항상 더 간단합니다. JavaScript 리디렉션 방법에는 두 가지가 있습니다.

www.newwebsite.com/new-location으로 경로를 변경하려는 시나리오를 고려하십시오. 이 경우 웹 페이지의 JS 코드에 다음 명령 중 하나를 포함할 수 있습니다.

통사론:

window.location.replace("/url or path"); //or

window.location.href = "/url or path";

리디렉션은 첫 번째 인스턴스에서 브라우저 기록에 레코드를 추가하지 않습니다. 그러나 웹사이트에서 다른 URL을 클릭하는 것과 유사하게 두 번째 인스턴스에서 설명이 추가됩니다.

예시:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function nUrl() {
        window.location.href = "b.html";
      }
    </script>
  </head>

  <body>
    <input type="button" value="Redirect page" onclick="nUrl()" />
  </body>
</html>

참고: 지정한 상대 경로가 절대 경로인지 확인하십시오. 그리고 다른 페이지가 b.html로 저장되어 있어야 합니다.

출력:

JavaScript 리디렉션 상대 URL

Redirect page 버튼을 클릭하면 페이지 링크가 다음과 같이 리디렉션됩니다.

자바스크립트 리디렉션 페이지

다음 사항에 유의하십시오.

  • JavaScript는 HTTPS 웹 페이지에서 HTTP 웹 사이트로 리디렉션하는 데 사용할 수 없습니다. 대부분의 브라우저에서는 이를 허용하지 않습니다.

    JavaScript를 사용하여 HTTP에서 HTTP로, HTTP에서 HTTPS로, HTTPS만 HTTPS 페이지로 리디렉션할 수 있습니다. HTTPS에서 HTTP 웹 사이트로의 서버 측 리디렉션을 사용해야 합니다.

  • 절대 경로(예: /new-location) 또는 완전한 URL(예: http://www.newwebsite.com/new-location)을 사용할 수 있습니다. 리디렉션을 위한 상대 경로를 지정하면 브라우저는 수정하지 않고 동일한 HTTP/HTTPS 프로토콜을 사용하여 웹사이트로 다시 라우팅합니다.

    HTTP에서 HTTPS 페이지로 리디렉션하기 위해 전체 URL을 제공하는 것이 가장 좋습니다.

  • 브라우저가 페이지를 다시 라우팅하지 않고 양식을 제출하기 때문에 Submit 버튼에 대한 기능 핸들러에 리디렉션을 배치하면 작동하지 않을 수 있습니다. 이러한 상황에서 AJAX를 사용하여 양식을 제출한 다음 버튼의 응답에 따라 리디렉션할 수 있습니다.

작가: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

관련 문장 - JavaScript Redirect