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

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.
Image CAPTCHA
Enter the characters shown in the image.

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

 
Chỉ số sức mạnh của 1 trang web trong SEO

Chỉ số sức mạnh của 1 trang web trong SEO

Bài viết này trình bày những yếu tố cấu thành nên chỉ số sức mạnh của 1 trang web (webpage không phải website) để làm cơ sở trong việc nghiên cứu từ khóa cho các chiến dịch SEO.

Công cụ Brush, Pattern, Styles cho thiết kế đồ họa, thiết kế mẫu, thiết kế website

Công cụ Brush, Pattern, Styles cho thiết kế đồ họa, thiết kế website

Hôm này mình xin giới thiệu 3 công cụ giúp các thiết kế viên mới áp dụng để thêm hoa lá cành cho tác phẩm thiết kế đồ họa, thiết kế mẫu, thiết kế website của mình sinh động hơn đó là công cụ Brush, Pattern, Styles.

Apple sở hữu web khiêu dâm “ăn theo” iPhone

Apple sở hữu web khiêu dâm “ăn theo” iPhone

Apple đã chính thức trở thành chủ sở hữu của bảy tên miền “dựa hơi” chiếc điện thoại đình đám iPhone và chuyển hướng khách truy cập tới những trang web khiêu dâm.

Tomdesgin.vn

 

Drupal Services