Javascript – Page Redirect

Chuyển hướng trang là gì?

Bạn có thể đã gặp phải tình huống khi bạn nhấp vào một URL để đến trang X nhưng bên trong bạn được chuyển hướng đến một trang Y khác. Điều này xảy ra do chuyển hướng trang. Khái niệm này khác với Làm mới trang JavaScript.

Có thể có nhiều lý do khiến bạn muốn chuyển hướng người dùng từ trang gốc. Chúng tôi đang liệt kê một số lý do –

  • Bạn không thích tên miền của mình và bạn đang chuyển sang một tên miền mới. Trong trường hợp như vậy, bạn có thể muốn hướng tất cả khách truy cập của mình đến trang web mới. Tại đây, bạn có thể duy trì miền cũ của mình nhưng đặt một trang duy nhất có chuyển hướng trang sao cho tất cả khách truy cập miền cũ có thể đến miền mới của bạn.
  • Bạn đã tạo nhiều trang khác nhau dựa trên phiên bản trình duyệt hoặc tên của chúng hoặc có thể dựa trên các quốc gia khác nhau, sau đó thay vì sử dụng chuyển hướng trang phía máy chủ, bạn có thể sử dụng chuyển hướng trang phía máy khách để đưa người dùng của mình đến trang thích hợp.
  • Các Công cụ Tìm kiếm có thể đã lập chỉ mục các trang của bạn. Nhưng khi chuyển sang một tên miền khác, bạn không muốn mất khách truy cập của mình thông qua các công cụ tìm kiếm. Vì vậy, bạn có thể sử dụng chuyển hướng trang phía máy khách. Nhưng hãy nhớ rằng điều này không nên được thực hiện để đánh lừa công cụ tìm kiếm, nó có thể khiến trang web của bạn bị cấm.

Cách chuyển hướng trang hoạt động?

Việc triển khai Chuyển hướng trang như sau.
Ví dụ 1

Khá đơn giản để thực hiện chuyển hướng trang bằng JavaScript ở phía máy khách. Để chuyển hướng khách truy cập trang web của bạn đến một trang mới, bạn chỉ cần thêm một dòng vào phần đầu của mình như sau.

<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>

Ví dụ 2

Bạn có thể hiển thị một thông báo thích hợp cho khách truy cập trang web của mình trước khi chuyển hướng họ đến một trang mới. Điều này sẽ cần một chút thời gian trễ để tải một trang mới. Ví dụ sau đây cho thấy cách triển khai tương tự. Đây setTimeout() là một hàm JavaScript tích hợp có thể được sử dụng để thực thi một hàm khác sau một khoảng thời gian nhất định.

<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>

Ví dụ 3

Ví dụ sau đây cho thấy cách chuyển hướng khách truy cập trang web của bạn đến một trang khác dựa trên trình duyệt của họ.

<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>