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