JavaScript - Chuyển hướng trang

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

Bạn có thể đã gặp phải trường hợp 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 khác Y. Điều này xảy ra do page redirection. Khái niệm này khác với JavaScript Page Refresh .

Có thể có nhiều lý do khác nhau khiến bạn muốn chuyển hướng người dùng từ trang gốc. Chúng tôi 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 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ì tên 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 tên miền cũ của bạn có thể đến tên miền mới của bạn.
Bạn đã tạo nhiều trang khác nhau dựa trên các 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 bạn đế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 trong khi chuyển sang một miền khác, bạn sẽ không muốn mất khách truy cập 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.

Hướng dẫn lại trang hoạt động như thế nào?

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>

Đầu ra

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 thời gian trễ một chút để tải trang mới. Ví dụ sau đây cho thấy cách thực hiện tương tự. ĐâysetTimeout() 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>

Đầu ra

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

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>