Hướng dẫn kiểm tra trình duyệt người dùng với Javascript

Hướng dẫn kiểm tra trình duyệt người dùng với Javascript

Hướng dẫn kiểm tra trình duyệt người dùng với Javascript

Cũng như CSS không phải tất cả các trình duyệt đều có mức độ hỗ trợ như nhau, sẽ có một số chức năng Javascript nào đó của bạn có thể sẽ không hoạt động trên một số trình duyệt cũ như IE6, IE7, hoặc IE8..., và cũng không phải tất cả các trình duyệt đều chạy trơn chu ứng dụng của bạn, có thể một số trình duyệt sẽ ngốn tài nguyên hệ thống và bạn phải tìm cách để thay thế bằng một đoạn mã khác hoặc loại đoạn mã đó khỏi những trình duyệt mà bạn không mong muốn.

Chúng ta đều biết khả năng xử lý Javascript của mỗi trình duyệt mỗi khác, sẽ là lý tưởng nếu ứng dụng Javascript của bạn đều chạy tốt trên tất cả các trình duyệt, nhưng thực tế thì không như vậy, trong bài này tôi xin giới thiệu một đoạn mã đơn giản trong Javascript, nó sẽ kiểm tra người dùng đang sử dụng trình duyệt gì và phiên bản bao nhiêu từ đó bạn có thể giễ ràng khắc phục javascript trên mỗi trình duyệt theo hướng của bạn.

Ý tưởng để xây dựng đoạn mã là việc sử dụng thuộc tính navigator.userAgent, trong bài một số thuộc tính và phương thức của đối tượng Window  tôi có đề cập đến thuộc tính này, và đây là ví dụ điển hình cho ứng dụng của thuộc tính mà tôi đã đề cập. Ngoài ra để xây dựng đoạn mã bạn còn cần phải biết các phương thức và thuộc tính của đối tượng chuỗi trong Javascript, chúng ta sẽ dùng nó để lọc thông tin cần thiết từ đoạn chuỗi trả về của thuộc tính userAgnet. Sau đây sẽ là đoạn mã chương trình.

Xây dựng hàm trả về tên trình duyệt

function browserName(){
   var Browser = navigator.userAgent;
   if (Browser.indexOf('MSIE') >= 0){
    Browser = 'MSIE';
   }
   else if (Browser.indexOf('Firefox') >= 0){
    Browser = 'Firefox';
   }
   else if (Browser.indexOf('Chrome') >= 0){
    Browser = 'Chrome';
   }
   else if (Browser.indexOf('Safari') >= 0){
    Browser = 'Safari';
   }
   else if (Browser.indexOf('Opera') >= 0){
      Browser = 'Opera';
   }
   else{
    Browser = 'UNKNOWN';
   }
   return Browser;
}

Ở đoạn mã trên biến "Browser" sẽ lưu đoạn chuỗi trả về từ thuộc tính  "userAgent", đoạn chuỗi sẽ chứa tên của trình duyệt nên chúng ta dùng phương thức indexOf() để kiểm tra tên trình duyệt trong đoạn chuỗi. Bản chất của phương thức indexOf() sẽ trả về vị trí của một đoạn chuỗi mà nó tìm thấy nên nếu nó lớn hơn bằng không tức là nó đã trả về vị trí mà nó tìm được (chuỗi trong Javascript cũng là một mảng ký tự và được đánh chỉ mục bắt đầu từ 0).

function browserVersion(){
   var index;
   var version = 0;
   var name = browserName();
   var info = navigator.userAgent;
   index = info.indexOf(name) + name.length + 1;
   version = parseFloat(info.substring(index,index + 3));
   return version;
}

Xây dựng hàm trả về phiên bản trình duyệt

function browserVersion(){
   var index;
   var version = 0;
   var name = browserName();
   var info = navigator.userAgent;
   index = info.indexOf(name) + name.length + 1;
   version = parseFloat(info.substring(index,index + 3));
   return version;
}

Trong đoạn chuỗi trả về từ thuộc tính userAgent chúng ta thấy phiên bản của trình duyệt được ghi ngay sau tên trình duyệt và được ngăn cách bằng một ký tự có thể là dấu "/" hoặc một khoảng trắng, từ kết quả đó trong đoạn mã trên tại dòng 6 chính là việc chúng ta lấy vị trí bắt đầu của đoạn chuỗi chứa thông tin phiên bản trình duyệt. ở dòng 7 chúng ta dùng phương thức substring() để tách ra một chuỗi con từ một chuỗi với đỗi số của phương thức chính là vị trí bắt đầu và vị trí kết thúc của đoạn chuỗi cần tách như ở trên chúng ta sẽ tách ra 3 ký tự. Ngoài ra chúng ta sẽ dùng hàm parseFloat() trong Javascript để trả về số thực từ đoạn chuỗi cần tách giả sử nếu tách được "10." thì sẽ thành "10"..

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 

Sử dụng Search API Sorts trong View Drupal 7

So what we actually need is to create a custom module that'll have less weight than search_api_module (-1) or have same weight but

Bài báo giới thiệu, viết về DRUPAL và WORDPRESS

Bài báo giới thiệu, viết về DRUPAL và WORDPRESS

A few months ago, I received a call from Karen who asked to present to the WP group to discuss how to transfer a site from Drupal to WordPress

Mark Zuckerberg

CEO Facebook – MARK ZUCKERBERG, thành công bằng cách nào

Nếu bạn có sử dụng Facebook thường xuyên để kết nối và cập nhật thông tin của bạn bè thì chắc chắn bạn không thể không biết đến Mark Zuckerberg

Công ty diệt chuột T&C

 

Diet con trung