Javascript kiểm tra xem trình duyệt là ie hay chrome

Cân nhắc trước khi sử dụng tính năng phát hiện trình duyệt

Khi xem xét sử dụng chuỗi tác nhân người dùng để phát hiện trình duyệt nào đang được sử dụng, bước đầu tiên của bạn là cố gắng tránh nó nếu có thể. Bắt đầu bằng cách cố gắng xác định lý do tại sao bạn muốn làm điều đó

Tìm hoặc hỏi trong các diễn đàn chuyên ngành. bạn không phải là người đầu tiên gặp phải vấn đề này. Ngoài ra, các chuyên gia hoặc những người có quan điểm khác có thể cung cấp cho bạn các ý tưởng để khắc phục lỗi. Nếu sự cố có vẻ không phổ biến, bạn nên kiểm tra xem lỗi này đã được báo cáo cho nhà cung cấp trình duyệt thông qua hệ thống theo dõi lỗi của họ chưa (Mozilla; WebKit; Blink; Opera). Các nhà sản xuất trình duyệt chú ý đến các báo cáo lỗi và phân tích có thể gợi ý về các cách giải quyết lỗi khác

Trang web của bạn cần sử dụng một tính năng Web cụ thể mà một số trình duyệt chưa hỗ trợ và bạn muốn đưa những người dùng đó đến một trang Web cũ hơn với ít tính năng hơn nhưng bạn biết rằng nó sẽ hoạt động. Đây là lý do tồi tệ nhất để sử dụng phát hiện tác nhân người dùng vì tỷ lệ cược cuối cùng là tất cả các trình duyệt khác sẽ bắt kịp. Ngoài ra, việc kiểm tra mọi trình duyệt ít phổ biến hơn và kiểm tra các tính năng Web đó là không thực tế. Bạn không bao giờ nên đánh hơi tác nhân người dùng. Thay vào đó, luôn có cách khác là thực hiện phát hiện tính năng

Đây thường là một cách làm không tốt, nhưng có một số trường hợp điều này là cần thiết. Trong những trường hợp này, trước tiên bạn nên phân tích tình huống của mình để chắc chắn rằng điều đó thực sự cần thiết. Bạn có thể ngăn chặn nó bằng cách thêm một số yếu tố if (navigator.userAgent.indexOf('Chrome') < 0) { // the user is NOT running Chrome } 1 hoặc if (navigator.userAgent.indexOf('Chrome') < 0) { // the user is NOT running Chrome } 2 phi ngữ nghĩa không? . Ngoài ra, hãy suy nghĩ lại về thiết kế của bạn. bạn có thể sử dụng tính năng nâng cao lũy tiến hoặc bố cục linh hoạt để giúp loại bỏ nhu cầu thực hiện việc này không?

Tránh phát hiện tác nhân người dùng

Nếu bạn muốn tránh sử dụng phát hiện tác nhân người dùng, bạn có các tùy chọn

Phát hiện tính năng là khi bạn không cố gắng tìm ra trình duyệt nào đang hiển thị trang của mình mà thay vào đó, bạn kiểm tra xem tính năng cụ thể mà bạn cần có khả dụng hay không. Nếu không, bạn sử dụng dự phòng. Trong những trường hợp hiếm hoi khi hành vi khác nhau giữa các trình duyệt, thay vì kiểm tra chuỗi tác nhân người dùng, thay vào đó, bạn nên triển khai thử nghiệm để phát hiện cách trình duyệt triển khai API và xác định cách sử dụng nó từ đó. Một ví dụ về phát hiện tính năng như sau. Vào năm 2017, hỗ trợ giao diện thử nghiệm chưa được gắn cờ của Chrome trong các biểu thức thông thường, nhưng không có trình duyệt nào khác hỗ trợ nó. Vì vậy, bạn có thể đã nghĩ để làm điều này

// This code snippet splits a string in a special notation let splitUpString; if (navigator.userAgent.includes("Chrome")) { // YES! The user is suspected to support look-behind regexps // DO NOT USE /(?<=[A-Z])/. It will cause a syntax error in // browsers that do not support look-behind expressions // because all browsers parse the entire script, including // sections of the code that are never executed. const camelCaseExpression = new RegExp("(?<=[A-Z])"); splitUpString = (str) => String(str).split(camelCaseExpression); } else { // This fallback code is much less performant, but works splitUpString = (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g); } console.log(splitUpString("fooBare")); // ["fooB", "are"] console.log(splitUpString("jQWhy")); // ["jQ", "W", "hy"]

Đoạn mã trên sẽ đưa ra một số giả định không chính xác. Đầu tiên, giả định rằng tất cả các chuỗi tác nhân người dùng bao gồm chuỗi con "Chrome" đều là Chrome. Chuỗi UA nổi tiếng là gây hiểu nhầm. Sau đó, giả định rằng tính năng tìm kiếm sẽ luôn khả dụng nếu trình duyệt là Chrome. Tác nhân có thể là phiên bản Chrome cũ hơn, từ trước khi hỗ trợ được thêm vào hoặc (vì tính năng này đang được thử nghiệm vào thời điểm đó) nên có thể là phiên bản Chrome mới hơn đã loại bỏ tác nhân đó. Quan trọng nhất, nó cho rằng không có trình duyệt nào khác hỗ trợ tính năng này. Hỗ trợ có thể đã được thêm vào các trình duyệt khác bất cứ lúc nào, nhưng mã này sẽ tiếp tục chọn con đường kém hơn

Thay vào đó, có thể tránh được các sự cố như thế này bằng cách kiểm tra sự hỗ trợ của chính tính năng đó

________số 8

Như đoạn mã trên chứng minh, luôn có cách để kiểm tra hỗ trợ trình duyệt mà không cần tác nhân người dùng đánh hơi. Không bao giờ có bất kỳ lý do gì để kiểm tra chuỗi tác nhân người dùng cho việc này

Cuối cùng, các đoạn mã trên gây ra một vấn đề nghiêm trọng với mã hóa trên nhiều trình duyệt luôn phải được tính đến. Không vô tình sử dụng API mà bạn đang thử nghiệm trong các trình duyệt không được hỗ trợ. Điều này nghe có vẻ hiển nhiên và đơn giản, nhưng đôi khi không phải vậy. Ví dụ: trong đoạn mã trên, việc sử dụng lookbehind trong ký hiệu biểu thức chính quy ngắn (ví dụ: /reg/igm) sẽ gây ra lỗi trình phân tích cú pháp trong các trình duyệt không được hỗ trợ. Vì vậy, trong ví dụ trên, bạn sẽ sử dụng new RegExp("(?