Điều hướng trang (Redirect) trong JavaScript

Điều hướng lại trang là gì?

Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang. Khái niệm này khác với: JavaScript – Refresh trang.

Có nhiều lý do khác nhau để tại sao bạn muốn redirect người dùng từ trang ban đầu. Dưới đây là một số lý do:

Bạn không thích tên miền của bạn và bạn đang muốn chuyển qua tới một tên miền mới. Trong trường hợp này, bạn có thể muốn điều hướng trực tiếp tất cả khách truy cập của bạn tới site mới. Tại đây, bạn có thể duy trì tên miền cũ, nhưng đặt một trang đơn với một sự điều hướng lại trang để mà tất cả khách truy cập tên miền cũ có thể tới miền mới.
Bạn đã xây dựng các trang khác nhau dựa trên các trình duyệt hoặc tên của nó hoặc có thể dựa trên các quốc gia khác nhau, sau đó, thay vì sử dụng sự điều hướng lại trang ở Server-Side, bạn có thể sử dụng sự điều hướng lại trang ở Client-Side để chuyển người dùng tới trang thích hợp.
Search Engines có thể đã Index các trang của bạn. Nhưng trong khi di chuyển tới miền mới, bạn không muốn đánh mất những vị khách truy cập thông qua phương tiện tìm kiếm. Vì thế bạn có thể sử dụng sự điều hướng lại trang ở Client-Side. Nhưng bạn nên nhớ rằng điều này không nên được thực hiện để lừa dối Search Engine, nó có thể cho trang của bạn thành trang bị cấm.

Quảng cáo

Page Redirection làm việc như thế nào?

Qui trình thực hiện của Page Redirection như sau:

Ví dụ 1

Nó là khá đơn giản để thực hiện Page Redirection sử dụng JavaScript tại Client-Side. Để điều hướng khách truy cập tới một trang mới, bạn chỉ cần thêm một dòng code trong khu vực head như sau:

<html>
   <head>
      
      <script type="text/javascript">
         <!--
            function Redirect() {
               window.location="http://www.vietjack.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>

Kết quả

Quảng cáo

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 trước khi điều hướng họ tới một trang mới. Điều này có thể cần một chút thời gian trì hoãn để tải trang mới. Ví dụ sau chỉ cách thực hiện tương tự. Tại đây, setTimeout() là một hàm có sẵn trong JavaScript mà có thể được sử dụng để thực thi lệnh khác sau một khoảng thời gian đã cho.

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

Kết quả

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

Ví dụ 3

Ví dụ sau chỉ cách điều hướng khách truy cập của bạn tới một trang khác dựa trên trình duyệt họ sử dụng.

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

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học JavaScript khác tại VietJack: