Cách chuyển hướng khách truy cập đến một trang web hoặc trang khác bằng JavaScript

Tìm hiểu cách thức và lý do chuyển hướng khách truy cập trang web của bạn đến một URL khác, với window.location của JavaScript đối tượng.

Cách chuyển hướng trang

Để chuyển hướng khách truy cập trang web của bạn đến một URL mới, tất cả những gì bạn cần là thực thi JavaScript sau trên trang web bạn muốn chuyển hướng từ đó:

window.location = "https://wheretoredirect.com"

Bạn có thể chèn mã vào .js bên ngoài hoặc đặt nó vào dòng trong phần đầu (<head> ) của trang web của bạn:

<script type="text/javascript">
  window.location = "https://wheretoredirect.com"
</script>

Giờ đây, bất kỳ khách truy cập trang web nào truy cập https://yourwebsite.com ngay lập tức sẽ được chuyển hướng đến URL bạn chỉ định làm window.location giá trị.

Bạn có thể sử dụng tính năng chuyển hướng trang để hướng khách truy cập trang web đến:

một tên miền trang web khác (từ oldsite.com tới newsite.com ).
một trang / bài đăng khác trên cùng một tên miền (yourwebsite.com/your-post ).
một thư mục con trên cùng một tên miền (yourwebsite.com/archive ).
một tên miền phụ (support.yourdomain.com ).

Đảm bảo rằng bạn sử dụng đúng giao thức trang web (https , www , https://www , v.v.) khi bạn chuyển hướng người dùng của mình.

Hiển thị thông báo trước khi chuyển hướng khách truy cập trang web

Để nâng cao trải nghiệm người dùng, bạn có thể hiển thị thông báo cho khách truy cập trang web của mình và trì hoãn chuyển hướng bằng đồng hồ đếm ngược. Bằng cách này, khách truy cập của bạn sẽ không bị nhầm lẫn tại sao họ đột nhiên được chuyển đến một URL hoặc miền khác.

Hãy lấy cùng một đoạn mã trước đó, nhưng bây giờ chúng ta cũng thêm đoạn mã sau:

một thông báo giải thích lý do tại sao họ được chuyển hướng.
đồng hồ đếm ngược thực thi mã chuyển hướng sau 5 giây.

Hiển thị tin nhắn + đồng hồ đếm ngược:

function showMessageBeforeRedirect() {
  window.location = "https://wheretoredirect.com"
}
document.write("You’ll be redirected to our new domain in 5 seconds :-)")
setTimeout("showMessageBeforeRedirect()", 5000)

5000 giá trị là mili giây.

Thử thêm mã vào trang web của bạn <head> như bạn đã làm trước đó:

<script type="text/javascript">
  function showMessageBeforeRedirect() {
    window.location = "https://wheretoredirect.com"
  }
  document.write("You’ll be redirected to our new domain in 5 seconds :-)")
  setTimeout("showMessageBeforeRedirect()", 5000)
</script>

Xem ví dụ về CodePen.

Tại sao bạn lại chuyển hướng khách truy cập của mình?

Dưới đây là một số lý do tại sao bạn muốn chuyển hướng người dùng trong các dự án thực tế:

Bạn đã chuyển sang một tên miền mới và bạn muốn đảm bảo rằng những người đã từng truy cập vào miền cũ của bạn sẽ được chuyển hướng đến miền mới.
Bạn có các phiên bản khác nhau của trang web, ví dụ:một cho các trình duyệt cũ và một cho các trình duyệt hiện đại và bạn muốn đảm bảo rằng người dùng truy cập vào một trình phù hợp với trình duyệt của họ.
Bạn có các phiên bản ngôn ngữ khác nhau của cùng một trang web và bạn muốn đảm bảo rằng ví dụ:người dùng có cài đặt ngôn ngữ Ý trong trình duyệt của họ được chuyển hướng đến yourwebsite.com/it .