JavaScript-페이지 리디렉션

페이지 리디렉션이란 무엇입니까?

페이지 X에 도달하기 위해 URL을 클릭했지만 내부적으로 다른 페이지 Y로 이동 한 상황이 발생했을 수 있습니다. page redirection. 이 개념은 JavaScript 페이지 새로 고침 과 다릅니다 .

원본 페이지에서 사용자를 리디렉션하려는 이유는 여러 가지가있을 수 있습니다. 몇 가지 이유를 나열했습니다.

도메인 이름이 마음에 들지 않아 새 도메인으로 이동합니다. 이러한 시나리오에서는 모든 방문자를 새 사이트로 안내 할 수 있습니다. 여기에서 이전 도메인을 유지할 수 있지만 모든 이전 도메인 방문자가 새 도메인에 올 수 있도록 페이지 리디렉션이있는 단일 페이지를 넣을 수 있습니다.
브라우저 버전 또는 이름을 기반으로 다양한 페이지를 구축했거나 다른 국가를 기반으로 할 수 있습니다. 그런 다음 서버 측 페이지 리디렉션을 사용하는 대신 클라이언트 측 페이지 리디렉션을 사용하여 사용자를 적절한 페이지로 이동할 수 있습니다.
검색 엔진이 이미 페이지의 색인을 생성했을 수 있습니다. 그러나 다른 도메인으로 이동하는 동안 검색 엔진을 통해 오는 방문자를 잃고 싶지 않습니다. 따라서 클라이언트 쪽 페이지 리디렉션을 사용할 수 있습니다. 그러나 이것이 검색 엔진을 속이기 위해 수행되어서는 안되며 사이트가 금지 될 수 있음을 명심하십시오.

페이지 리디렉션은 어떻게 작동합니까?

페이지 리디렉션의 구현은 다음과 같습니다.

예 1

클라이언트 측에서 JavaScript를 사용하여 페이지 리디렉션을 수행하는 것은 매우 간단합니다. 사이트 방문자를 새 페이지로 리디렉션하려면 다음과 같이 헤드 섹션에 행을 추가하기 만하면됩니다.

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Click the following button, you will be redirected to home page.</p>
      
      <form>
         <input type = "button" value = "Redirect Me" onclick = "Redirect();" />
      </form>
      
   </body>
</html>

산출

예 2

사이트 방문자를 새 페이지로 리디렉션하기 전에 적절한 메시지를 표시 할 수 있습니다. 새 페이지를로드하려면 약간의 시간 지연이 필요합니다. 다음 예제는이를 구현하는 방법을 보여줍니다. 여기setTimeout() 주어진 시간 간격 후에 다른 함수를 실행하는 데 사용할 수있는 내장 JavaScript 함수입니다.

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
   </head>
   
   <body>
   </body>
</html>

산출

You will be redirected to tutorialspoint.com main page in 10 seconds!

예제 3

다음 예는 사이트 방문자를 브라우저에 따라 다른 페이지로 리디렉션하는 방법을 보여줍니다.

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            var browsername = navigator.appName;
            if( browsername == "Netscape" ) {
               window.location = "http://www.location.com/ns.htm";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie.htm";
            } else {
               window.location = "http://www.location.com/other.htm";
            }
         //-->
      </script>      
   </head>
   
   <body>
   </body>
</html>