Hướng dẫn chuyển hướng trang web bằng Javascript và HTML

Doãn Huynh

Member
19/05/2026
197
1
18
Để chuyển hướng website của bạn đến một website khác, có thể dùng hai cách sau:

1. Dùng HTML Redirect:​


Ưu điểm: nhanh, nhẹ, hoạt động chuẩn 100% trên tất cả trình duyệt.
Nhược điểm: Ít tính năng hơn javascript.
Ví dụ:

Hướng dẫn chuyển hướng trang web bằng Javascript và HTML


HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="refresh" content="5;url=http://hocdu.com">
  <title>Tên Website</title>
</head>
<body>
  <h1>Tiêu đề</h1> //Phần này có thể không cần dùng
  <p>Nội dung</p>  //Phần này có thể không cần dùng
</body>
</html>

2. Dùng Javascript Redirect:​

Ưu điểm: Có thể thiết lập thời gian chờ trước khi chuyển hướng, thậmc chí có thể set random time.
Nhược điểm: Nặng hơn HTML, yêu cầu trình duyệt có hỗ trợ Java.

Ví dụ tạo chuyển hướng web sau 15 giây:

JavaScript:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chuyển hướng tự động</title>
  <script>
    // Hàm chuyển hướng sau một khoảng thời gian
    function chuyenHuongTuDong() {
      setTimeout(function() {
        window.location.href = "http://hocdu.com";
      }, 15000); // 15000 milliseconds = 15 giây
    }
  </script>
</head>
<body>
  <h1>Trang web chuyển hướng tự động</h1>
  <!-- Nội dung trang web của bạn -->

  <!-- Gọi hàm chuyển hướng khi trang web được tải -->
  <script>
    chuyenHuongTuDong();
  </script>
</body>
</html>

Ví dụ tạo chuyển hướng web sau khoản thời gian ngẫu nhiên từ 10s đến 30s:

JavaScript:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chuyển hướng sau thời gian ngẫu nhiên</title>
  <script>
    // Hàm để chuyển hướng đến trang web sau một thời gian ngẫu nhiên
    function chuyenHuongNgauNhien() {
      const minTime = 10 * 1000; // 10 giây (tính bằng mili giây)
      const maxTime = 30 * 1000; // 30 giây (tính bằng mili giây)
  
      // Tạo số ngẫu nhiên trong khoảng từ minTime đến maxTime
      const randomTime = Math.floor(Math.random() * (maxTime - minTime + 1) + minTime);

      // In thời gian chờ để kiểm tra
      console.log(`Chuyển hướng sau ${randomTime / 1000} giây.`);

      // Đặt hẹn giờ cho chuyển hướng sau thời gian ngẫu nhiên
      setTimeout(function() {
        window.location.href = "http://hocdu.com"; // Thay thế URL bằng trang web bạn muốn chuyển hướng đến.
      }, randomTime);
    }
  </script>
</head>
<body>
  <h1>Chuyển hướng sau thời gian ngẫu nhiên</h1>
  <button onclick="chuyenHuongNgauNhien()">Bắt đầu</button>
</body>
</html>
 
Sửa lần cuối bởi điều hành viên:
Trong các framework hiện đại như React hay Next.js thì nên dùng router chuyên dụng (useRouter / redirect) để chuyển trang không cần load lại toàn bộ.
 
Đoạn code chuyển hướng dùng window.location.replace() rất mượt và không lưu lại lịch sử back trang, tránh người dùng bị kẹt vòng lặp.
 
Bài viết hướng dẫn về 'chuyển hướng trang web bằng Javascript và HTML' rất chi tiết và dễ hiểu, cảm ơn chủ thớt đã chia sẻ!
 
Nếu chuyển hướng vĩnh viễn tên miền hoặc bài viết thì nên cấu hình Redirect 301 qua file .htaccess hoặc Nginx để giữ nguyên thứ hạng tìm kiếm.