Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách chuyển hướng khách truy cập trang web dựa trên trình duyệt của họ

Trang web của bạn có thể đang chạy một số tính năng tiên tiến hiện đại không tương thích với một số trình duyệt (đặc biệt là các trình duyệt cũ / cũ như Internet Explorer). May mắn thay, bạn có thể sử dụng JavaScript để phát hiện trình duyệt mà khách truy cập trang web của bạn đang sử dụng (hoặc không sử dụng). Sau đó, bạn có thể chuyển hướng khách truy cập của mình đến một phiên bản trang web của bạn tương thích với trình duyệt của họ.

Chuyển hướng nếu người dùng không sử dụng Chrome

Giả sử rằng phiên bản tiên tiến nhất của trang web của bạn hiện tại chỉ tương thích 100% với trình duyệt Chrome và bạn muốn chuyển hướng bất kỳ khách truy cập nào không sử dụng Chrome đến một phiên bản khác của trang web của bạn để đảm bảo rằng họ không có một trải nghiệm lỗi.

Thêm mã sau vào <head> của trang web của bạn (hoặc trong .js bên ngoài tệp):

if (!!window.chrome) {
  window.location = "https://yourdomain.com"
} else {
  window.location = "https://yourdomain.com/legacy-version"
}

Bạn có thể muốn giải thích cho người dùng của mình lý do tại sao họ được chuyển hướng và có thể khuyến khích họ sử dụng trình duyệt Chrome nếu họ muốn trải nghiệm phiên bản tốt nhất của nền tảng của bạn:

if (!!window.chrome) {
  window.location = "https://yourdomain.com"
  alert("You’re using Chrome")
} else {
  alert(
    "Our apologies, at the moment you have to use Chrome to use the latest version of our website. You’ll be redirected to our legacy website (don’t worry it works just fine!)."
  )
  window.location = "https://yourdomain.com/legacy-site"
}

Giờ đây, bất kỳ người dùng nào không sử dụng Chrome sẽ được chuyển hướng đến bất kỳ window.location nào giá trị bạn chỉ định.

Để biết rằng nó đang hoạt động, hãy thử mở Chrome mẫu CodePen này, sau đó thử mở nó trong ví dụ:Firefox, Opera hoặc một số trình duyệt khác.

Nếu bạn định sử dụng ứng dụng này trong đời thực, hãy đảm bảo rằng bạn xóa alert("You’re using Chrome") từ mã của bạn. Tôi chỉ thêm nó cho mục đích trình diễn.

Bạn có thể thử với mã từ hướng dẫn này tại đây.

Công nghệ phát hiện trình duyệt thay đổi và phát triển nhanh chóng. Các trình duyệt khác nhau yêu cầu các phương pháp phát hiện khác nhau. Nó cũng quan trọng đến việc người dùng của bạn đang duyệt trên thiết bị nào (máy tính xách tay, máy tính bảng, điện thoại thông minh, v.v.).

Để cập nhật công nghệ phát hiện trình duyệt mới nhất, tôi khuyên bạn nên theo dõi chuỗi StackOverflow đang hoạt động này.