web-dev-qa-db-fra.com

Comment détecter le type de navigateur avec jQuery?

Je souhaite détecter si l'utilisateur utilise IE et Firefox, mais je ne parviens pas à trouver le script.

J'ai le code ci-dessous:

$(document).ready(function(e) {
    $.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 
    if($.browser.chrome){
        alert(1);
             //this work well
    }
            else if(//the browser is IE){alert(2);}
            else if(//the browser is Firefox){alert(3);}

   //The problem is that I don't know how to write a script for IE and FireFox browser for chrome is work fine
 )};
javascriptjqueryinternet-explorerfirefoxbrowser
21
sealong Maly

La meilleure solution est probablement: utilisez Modernizr.

Cependant, si vous voulez nécessairement utiliser la propriété $ .browser, vous pouvez le faire en utilisant jQuery Migrate plugin (pour JQuery> = 1.9 - dans les versions précédentes, vous pouvez simplement l'utiliser), puis procédez comme suit:

if($.browser.chrome) {
   alert(1);
} else if ($.browser.mozilla) {
   alert(2);
} else if ($.browser.msie) {
   alert(3);
}

Et si vous avez besoin pour une raison quelconque d'utiliser navigator.userAgent, alors ce serait:

$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); 
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
28
Milosz

Ma solution pour ie detection: 

if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
    $("html").addClass("ie");
}

Jquery avait besoin.

22
András

Vous ne devriez pas écrire votre propre code de détection de navigateur - cela a déjà été fait plusieurs fois auparavant. Utilisez Modernizr pour détecter des fonctionnalités de navigateur indépendantes. Il est préférable de détecter les diverses fonctionnalités plutôt que de rechercher des navigateurs entiers, car ceux-ci peuvent prendre en charge différents ensembles de fonctionnalités et ces fonctionnalités peuvent même changer à travers différentes versions du même navigateur. Si vous détectez la présence d'une fonctionnalité donnée, votre code fonctionnera probablement mieux dans davantage de navigateurs. Cela est particulièrement vrai pour les différents navigateurs mobiles.

Lorsque vous exécutez Modernizr, il met à jour l'attribut HEAD de votre élément class afin qu'il répertorie les différentes fonctionnalités du navigateur que vous utilisez. Vous pouvez ensuite utiliser Javascript pour interroger l'attribut et décider quoi faire si une fonctionnalité est présente ( ou manquant).

6
xxbbcc

Utilisez ceci:

(function (factory) {
  if (typeof define === 'function' && define.AMD) {
    // AMD. Register as an anonymous module.
    define(['jquery'], function ($) {
      return factory($);
    });
  } else if (typeof module === 'object' && typeof module.exports === 'object') {
    // Node-like environment
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(window.jQuery);
  }
}(function(jQuery) {
  "use strict";

  function uaMatch( ua ) {
    // If an UA is not provided, default to the current browser UA.
    if ( ua === undefined ) {
      ua = window.navigator.userAgent;
    }
    ua = ua.toLowerCase();

    var match = /(Edge)\/([\w.]+)/.exec( ua ) ||
        /(opr)[\/]([\w.]+)/.exec( ua ) ||
        /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(version)(applewebkit)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+).*(version)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie) ([\w.]+)/.exec( ua ) ||
        ua.indexOf("trident") >= 0 && /(rv)(?::| )([\w.]+)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];

    var platform_match = /(ipad)/.exec( ua ) ||
        /(iPod)/.exec( ua ) ||
        /(iphone)/.exec( ua ) ||
        /(Kindle)/.exec( ua ) ||
        /(silk)/.exec( ua ) ||
        /(Android)/.exec( ua ) ||
        /(windows phone)/.exec( ua ) ||
        /(win)/.exec( ua ) ||
        /(mac)/.exec( ua ) ||
        /(linux)/.exec( ua ) ||
        /(cros)/.exec( ua ) ||
        /(playbook)/.exec( ua ) ||
        /(bb)/.exec( ua ) ||
        /(blackberry)/.exec( ua ) ||
        [];

    var browser = {},
        matched = {
          browser: match[ 5 ] || match[ 3 ] || match[ 1 ] || "",
          version: match[ 2 ] || match[ 4 ] || "0",
          versionNumber: match[ 4 ] || match[ 2 ] || "0",
          platform: platform_match[ 0 ] || ""
        };

    if ( matched.browser ) {
      browser[ matched.browser ] = true;
      browser.version = matched.version;
      browser.versionNumber = parseInt(matched.versionNumber, 10);
    }

    if ( matched.platform ) {
      browser[ matched.platform ] = true;
    }

    // These are all considered mobile platforms, meaning they run a mobile browser
    if ( browser.Android || browser.bb || browser.blackberry || browser.ipad || browser.iphone ||
      browser.iPod || browser.Kindle || browser.playbook || browser.silk || browser[ "windows phone" ]) {
      browser.mobile = true;
    }

    // These are all considered desktop platforms, meaning they run a desktop browser
    if ( browser.cros || browser.mac || browser.linux || browser.win ) {
      browser.desktop = true;
    }

    // Chrome, Opera 15+ and Safari are webkit based browsers
    if ( browser.chrome || browser.opr || browser.safari ) {
      browser.webkit = true;
    }

    // IE11 has a new token so we will assign it msie to avoid breaking changes
    // IE12 disguises itself as Chrome, but adds a new Edge token.
    if ( browser.rv || browser.Edge ) {
      var ie = "msie";

      matched.browser = ie;
      browser[ie] = true;
    }

    // Blackberry browsers are marked as Safari on BlackBerry
    if ( browser.safari && browser.blackberry ) {
      var blackberry = "blackberry";

      matched.browser = blackberry;
      browser[blackberry] = true;
    }

    // Playbook browsers are marked as Safari on Playbook
    if ( browser.safari && browser.playbook ) {
      var playbook = "playbook";

      matched.browser = playbook;
      browser[playbook] = true;
    }

    // BB10 is a newer OS version of BlackBerry
    if ( browser.bb ) {
      var bb = "blackberry";

      matched.browser = bb;
      browser[bb] = true;
    }

    // Opera 15+ are identified as opr
    if ( browser.opr ) {
      var opera = "opera";

      matched.browser = opera;
      browser[opera] = true;
    }

    // Stock Android browsers are marked as Safari on Android.
    if ( browser.safari && browser.Android ) {
      var Android = "Android";

      matched.browser = Android;
      browser[Android] = true;
    }

    // Kindle browsers are marked as Safari on Kindle
    if ( browser.safari && browser.Kindle ) {
      var Kindle = "Kindle";

      matched.browser = Kindle;
      browser[Kindle] = true;
    }

     // Kindle Silk browsers are marked as Safari on Kindle
    if ( browser.safari && browser.silk ) {
      var silk = "silk";

      matched.browser = silk;
      browser[silk] = true;
    }

    // Assign the name and platform variable
    browser.name = matched.browser;
    browser.platform = matched.platform;
    return browser;
  }

  // Run the matching process, also assign the function to the returned object
  // for manual, jQuery-free use if desired
  window.jQBrowser = uaMatch( window.navigator.userAgent );
  window.jQBrowser.uaMatch = uaMatch;

  // Only assign to jQuery.browser if jQuery is loaded
  if ( jQuery ) {
    jQuery.browser = window.jQBrowser;
  }

  return window.jQBrowser;
}));
4
EpokK

Essayez de l'utiliser

$(document).ready(function() {
// If the browser type if Mozilla Firefox
if ($.browser.mozilla && $.browser.version >= "1.8" ){ 
// some code
}
// If the browser type is Opera
if( $.browser.opera)
{
// some code
}
// If the web browser type is Safari
if( $.browser.safari )
{
// some code
}
// If the web browser type is Chrome
if( $.browser.chrome)
{
// some code
}
// If the web browser type is Internet Explorer
if ($.browser.msie && $.browser.version <= 6 )
{
// some code
}
//If the web browser type is Internet Explorer 6 and above
if ($.browser.msie && $.browser.version > 6)
{
// some code
}
});
1
cyberoot

Vous pouvez utiliser ce code pour trouver le bon navigateur et vous pouvez modifier n'importe quel navigateur cible ..... 

function myFunction() { 
        if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ){
            alert('Opera');
        }
        else if(navigator.userAgent.indexOf("Chrome") != -1 ){
            alert('Chrome');
        }
        else if(navigator.userAgent.indexOf("Safari") != -1){
            alert('Safari');
        }
        else if(navigator.userAgent.indexOf("Firefox") != -1 ){
             alert('Firefox');
        }
        else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )){
          alert('IE'); 
        }  
        else{
           alert('unknown');
        }
    }
<!DOCTYPE html>
<html>
<head>
	<title>Browser detector</title>

</head>
<body onload="myFunction()">
// your code here 
</body>
</html>

1
arvinda kumar

Vous pouvez obtenir le type de navigateur ici:

<script>
    var browser_type = Object.keys($.browser)[0];
    alert(browser_type);
</script>
0
sandeep kumar
$.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 

if($.browser.chrome){
  alert(1);      
}

UPDATE: (10x à @ M. Bacciagalupe)

jQuery a supprimé $.browser de 1.9 et leur dernière version. 

Mais vous pouvez toujours utiliser $ .browser en tant que plugin autonome, trouvé ici

0
Vishal Thakur

Une autre façon de trouver des versions d'IE

http://tanalin.com/fr/articles/ie-version-js/

Version IE Condition à vérifier

IE 10 or older -   document.all <BR/> 
IE 9 or older  -   document.all && !window.atob <br/>
IE 8 or older  -   document.all && !document.addEventListener <br/>
IE 7 or older  -   document.all && !document.querySelector <br/>
IE 6 or older  -   document.all && !window.XMLHttpRequest <br/>
IE 5.x         -   document.all && !document.compatMode
0
Prem Kumar

$(document).ready(function(){
				alert('sdfsd');
				checkOperatingSystem();
			});
			function checkOperatingSystem(){
			    var  userAgent = navigator.userAgent || navigator.vendor || window.opera;

			    
			    if (/Android/i.test(userAgent)) {
			        alert('Android');
			    }

			    
			    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
			        alert('ios');
			    }

			   
			    if (navigator.appVersion.indexOf("Win")!=-1)
			    {
			        
			    }

			   
			    if (navigator.appVersion.indexOf("Mac")!=-1)
			    {
			        
			    }  
			}

0
arvinda kumar