home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

วิธีเปลี่ยนเส้นทางผู้เยี่ยมชมเว็บไซต์ตามเบราว์เซอร์

เว็บไซต์ของคุณอาจใช้งานคุณลักษณะล้ำสมัยบางอย่างที่ไม่สามารถทำงานร่วมกับเบราว์เซอร์บางตัวได้ (โดยเฉพาะเบราว์เซอร์รุ่นเก่า/รุ่นเก่า เช่น Internet Explorer) โชคดีที่คุณสามารถใช้ JavaScript เพื่อตรวจสอบว่าผู้เข้าชมไซต์ของคุณใช้เบราว์เซอร์ใด (หรือไม่ได้ใช้) จากนั้นคุณสามารถเปลี่ยนเส้นทางผู้เยี่ยมชมของคุณไปยังเว็บไซต์เวอร์ชันที่เข้ากันได้กับเบราว์เซอร์ของพวกเขา

เปลี่ยนเส้นทางหากผู้ใช้ไม่ได้ใช้ Chrome

สมมติว่าเวอร์ชันล่าสุดของเว็บไซต์ของคุณใช้งานได้กับเบราว์เซอร์ Chrome เพียง 100% เท่านั้น และคุณต้องการเปลี่ยนเส้นทางผู้เยี่ยมชมที่ไม่ได้ใช้ Chrome ไปยังเว็บไซต์เวอร์ชันอื่นเพื่อให้แน่ใจว่าไม่มี ประสบการณ์แบบบั๊กกี้

เพิ่มรหัสต่อไปนี้ใน <head> ของเว็บไซต์ของคุณ (หรือใน .js ภายนอก) ไฟล์):

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

คุณอาจต้องการอธิบายให้ผู้ใช้ของคุณทราบว่าทำไมพวกเขาจึงถูกเปลี่ยนเส้นทาง และอาจแนะนำให้พวกเขาใช้เบราว์เซอร์ Chrome หากพวกเขาต้องการสัมผัสประสบการณ์แพลตฟอร์มเวอร์ชันที่ดีที่สุดของคุณ:

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"
}

ตอนนี้ผู้ใช้ที่ไม่ได้ใช้ Chrome จะถูกเปลี่ยนเส้นทางไปยัง window.location ค่าที่คุณกำหนด

หากต้องการดูว่ามันใช้งานได้ ให้ลองเปิดตัวอย่าง CodePen นี้ใน Chrome แล้วลองเปิดในเช่น Firefox, Opera หรือเบราว์เซอร์อื่นๆ

หากคุณกำลังจะใช้สิ่งนี้ในชีวิตจริง อย่าลืมลบ alert("You’re using Chrome") จากรหัสของคุณ ฉันเพิ่มไว้เพื่อการสาธิตเท่านั้น

คุณสามารถลองใช้โค้ดจากบทช่วยสอนนี้ได้ที่นี่

เทคโนโลยีการตรวจจับเบราว์เซอร์เปลี่ยนแปลงและพัฒนาอย่างรวดเร็ว เบราว์เซอร์ที่แตกต่างกันต้องใช้วิธีการตรวจจับที่แตกต่างกัน นอกจากนี้ยังมีความสำคัญที่ผู้ใช้ของคุณกำลังเรียกดูอุปกรณ์ (แล็ปท็อป แท็บเล็ต สมาร์ทโฟน ฯลฯ)

เพื่อให้ทันกับเทคโนโลยีการตรวจจับเบราว์เซอร์ล่าสุด เราขอแนะนำให้คุณจับตาดูเธรด StackOverflow ที่ใช้งานอยู่