Comment faire de la détection de navigateur avec jQuery 1.3 avec $ .Browser.msie obscète?
Comment la détection du navigateur doit-elle être effectuée maintenant que JQuery 1.3 est obsolète (et je suppose que je suppose en une version future) $.browser.msie et similaire?
J'ai beaucoup utilisé cela pour déterminer quel navigateur nous sommes dans les correctifs CSS pour assez tous les navigateurs, tels que:
$.browser.opera
$.browser.safari
$.browser.mozilla
... eh bien je pense que c'est tout :)
Les endroits où je l'utilise, je ne suis pas sûr de ce que la question du navigateur provoque le problème, car beaucoup de fois, j'essaie simplement de réparer un 1 px Différence dans un navigateur.
Edit : Avec la nouvelle fonctionnalité de JQuery, il n'est pas moyen de déterminer si vous êtes dans IE6 ou IE7. Comment peut-on déterminer cela maintenant?
Je faisais face à quelque chose de similaire, il n'y a pas de $ .support.png (p.ej.), alors j'ai besoin d'utiliser le $ .Browser.version pour le moment, nous pouvons peut-être continuer à demander plus de $ .Support.xxxx propriétés, autant comme requis.
Oui, la détection du navigateur a été obsolète, mais les propriétés obsolètes ne seront probablement pas supprimées de JQuery à tout moment. Et quand ils seront supprimés, si vous devez toujours absolument faire la détection de navigateur, vous pouvez ajouter facilement la même fonctionnalité avec un petit plugin simple.
Donc, ma réponse est de ne rien faire à ce sujet, pour l'instant :)
edit: Je vais même vous fournir un plugin à utiliser à l'avenir (non testé, collé - collé de JQuery Source):
(function($) {
var userAgent = navigator.userAgent.toLowerCase();
$.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
})(jQuery);
.Browser a été obsolète en faveur de .support. Plus d'informations sur ici: jquery.support Qu'est-ce que cela signifie essentiellement que, au lieu d'utiliser le navigateur reniflant, JQuery fait désormais une détection de support de fonctionnalité et permet de contrôler beaucoup plus de contrôle grainé sur ce que le navigateur peut faire.
De la description:
Ajouté à JQuery 1.3 une collection de propriétés représentant la présence de différentes fonctionnalités de navigateur ou de bugs.
jQuery est livré avec un certain nombre de propriétés incluses, vous devriez vous sentir libre d'ajouter la vôtre. Beaucoup de ces propriétés sont plutôt faibles de manière peu faible, il est donc douteux qu'ils soient utiles au développement quotidien général, mais principalement utilisé par le plugin et les développeurs de base.
Les valeurs de toutes les propriétés de support sont déterminées à l'aide de la détection des fonctionnalités (et n'utilisez aucune forme de navigateur reniflant)
le support de fonctionnalités semble une bonne idée, mais cela ne fonctionnera que comme prévu lorsqu'il prend en charge tous les "bugs" possibles. Comme le premier commentateur, il n'y a pas de support $.png ou a $ support.Sepping, ou A $ support.peekaboo, ou A, OH, la liste se passe. Le problème avec ceci est que certains code permettent de créer un navigateur inévitable finalement être exécuté par un navigateur qui n'en a pas besoin.
Détection de navigateur N'est pas obsolète à JQuery. DOC Page pour jquery.browser , qui indique:
Nous vous recommandons d'utiliser cette propriété, s'il vous plaît essayer d'utiliser la détection de fonctionnalités à la place (voir jquery.support).
La dépréciation signifie "édité pour la suppression future". Ce conseil concernant renifler les capacités plutôt que pour les agents d'utilisateur n'est que de bons conseils généraux et non spécifiques à JQuery. Tout ce qu'ils disent, c'est qu'ils facilitent la tâche de faire la bonne chose.
Il y aura toujours un besoin d'agent d'utilisateur reniflant cependant. Sauf si jQuery.support est mis à jour quotidiennement par une armée de développeurs, il n'y a aucun moyen de suivre chaque bogue et chaque fonctionnalité de chaque version du point mineur de chaque navigateur.
Je pense que la confusion à ce sujet est apparue du fait que, en interne, JQuery n'est plus le navigateur reniflant. Mais l'API UTILITY API JQuery.Browser continuera d'exister.
function browserLessThanIE7(){
return (/MSIE ((5\\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
}
Pourrait aussi fonctionner bien ... Celui-ci vérifie la version 5, 5.5 et 6.
@Nate: change (5\.5) | 6 en 7 et il vérifie la version 7.
Je dis l'ingénieur inverse de JQuery 1.2's CodeBase.
Voir cette section du code:
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
Respectez le GPL et MIT licences et apprendre du code. Ne copiez-vous pas.
Ou spécifiquement pour sentair IE6. Vous pourriez faire:
function IsThisBrowserIE6() {
return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined))
}
La détection de fonctionnalités sonne tous les fins et dandy, mais lorsque j'écris du code qui ne fonctionne pas dans un certain navigateur, la méthode la plus rapide est la détection du navigateur.
Centrage horizontalement Un élément utilisant des marges automatiques fonctionne pour tous les navigateurs, sauf c.-à-d. De quelle fonctionnalité dois-je tester? Je n'ai aucune idée. Mais je sais quel navigateur ne fonctionne pas dans.
Je peux voir pourquoi la détection de la fonctionnalité serait utile dans certaines situations, par exemple. Si un navigateur est en mode bizarre/strict. Le meilleur compromis serait d'utiliser les deux méthodes.
À la lumière de cela "Nous recommandons d'utiliser cette propriété, s'il vous plaît essayer d'utiliser la détection de fonctionnalités" doit être supprimé de la page de documentation JQuery.Browser. C'est trompeur.
Pourquoi ne pouvait-il pas être ré-écrit pour utiliser jquery.support en interne pour déterminer le navigateur en fonction des fonctionnalités (peut-être complétés par des méthodes actuelles de JQuery.Browser, afin de fournir un moyen pratique de sélectionner pour la famille et la version de navigateur. , tandis que peut-être être plus fiable que JQuery.Browser d'aujourd'hui?
Cela peut ne pas être le moyen le plus propre pour IE 6 mais cela fonctionne certainement et est facile à comprendre:
$(document).ready(function() {
ie6catch = $.browser.msie + $.browser.version;
if (ie6catch.indexOf("true6") == -1) {
alert("This is not Internet Explorer 6");
}
});
J'ai un morceau de JavaScript qui fonctionne bien dans les navigateurs Mozilla et WebKit, ainsi que IE8. Cependant, dans 6 et 7, il se casse. Cela n'a rien à voir avec le CSS, ni le pauvre JavaScript, mais les supports de merde de IE <8.
Je peux voir où les gens viennent de rechercher des "fonctionnalités" par opposition au navigateur reniflant, cependant, les fonctionnalités qui reniflant sont disponibles ne sont pas pertinentes pour le code de rupture, alors quelle est la différence entre le navigateur reniflant et la fonctionnalité reniflant jusqu'à ce que Toutes les fonctionnalités sont disponibles dans l'objet $ .Support?
Essayez le script geckofix à - http://code.labor8.eu/geckofix , il détecte le Firefox inférieur à 3.0 afin que vous puissiez le personnaliser comment vous voulez (c'est-à-dire en ajoutant plus de règles comme détective Firefox 2, Firefox 3, Opera et safari). Je pense que cela pourrait être ce que vous recherchez. Pour vérifier l'agent utilisateur, tapez juste dans votre adresse d'adresse JavaScript: alerte (navigateur.useragent) et Trouvez des caractères spécifiques que vous aurez besoin de taper le script.
J'aimerais souligner que navigator.userAgent n'est pas très digne de confiance, dans le sens où il est facilement modifiable et pourrait ne pas représenter le navigateur actuel de visualiser la page. Cela pourrait être l'une des raisons $.browser a été obsolète en premier lieu.
Mais pour la question de la question, supposons que la détection du navigateur est absolument nécessaire .
J'ai couru dans cet extrait très cool de James Padolsey , qui différencie réellement entre Internet Explorateurs en utilisant des commentaires conditionnels.
J'ai compilé un petit morceau de code avec un extrait ci-dessus et un code de Yepnope.js :
(function(window, doc) {
window.detector = window.detector || (function() {
var undef,
docElement = doc.documentElement,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i'),
isGecko = ( 'MozAppearance' in docElement.style ),
isGeckoLTE18 = isGecko && !! doc.createRange().compareNode,
isOpera = !! ( window.opera && toString.call( window.opera ) == '[object Opera]' ),
isWebkit = ( 'webkitAppearance' in docElement.style ),
isNewerWebkit = isWebkit && 'async' in doc.createElement('script');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return {
isGecko: isGecko,
isGeckoLTE18: isGeckoLTE18,
isGeckoGT18: isGecko && ! isGeckoLTE18,
isOpera: isOpera,
isWebkit: isWebkit,
isNewerWebkit: isWebkit && 'async' in doc.createElement('script'),
isIE: ( v > 4 ),
ieVersion: ( v > 4 ? v : undef )
};
}());
}(window, document));
Cela différencie entre les navigateurs par leurs capacités.
Seuls des problèmes sont, je n'ai actuellement aucun moyen de dire entre Safari et Chrome (navigateurs Webkit) et entre les versions de Gecko, Webkit et Opera navigateurs eux-mêmes.
Je sais que ce n'est pas parfait, mais c'est une légère amélioration sur navigator.userAgent.
JQuery 1.3 a remplacé les tests de navigateur .
Franchement, je suis surpris de voir combien de fois les développeurs Web sont préoccupés par ce que le navigateur est exécuté dans son site. Dans plus de 10 ans de développement Web, je peux penser à une poignée de cas où je me suis soucié de faire face à rien de différent. La raison la plus courante a été que la forme de police nommée diffère de manière significative entre Firefox et IE (_ [font-size: large est beaucoup plus grand dans IE que ff), donc j'ai utilisé un fichier IEFIX.CSS pour corriger cela.
Peut-être devriez-vous regarder Quoi de mieux: la détection des hacks ou du navigateur CSS? Pour une discussion plus approfondie sur le sujet.
Le long et court de cela est que vous devriez vous soucier si une fonctionnalité est prise en charge ou non, ce qui n'est pas le navigateur.
Il est difficile de dire quelque chose de plus sans savoir pourquoi vous vous souciez si c'est IE car vous trouverez probablement une solution bien meilleure pour faire ce que vous faites.
var browser = {
chrome: false,
mozilla: false,
opera: false,
msie: false,
safari: false
};
var sBrowser, sUsrAg = navigator.userAgent;
if(sUsrAg.indexOf("Chrome") > -1) {
browser.chrome = true;
} else if (sUsrAg.indexOf("Safari") > -1) {
browser.safari = true;
} else if (sUsrAg.indexOf("Opera") > -1) {
browser.opera = true;
} else if (sUsrAg.indexOf("Firefox") > -1) {
browser.mozilla = true;
} else if (sUsrAg.indexOf("MSIE") > -1) {
browser.msie = true;
}
console.log(browser.msie);
Ce qui serait une bonne idée est d'ajouter des navigateurs comme une classe à l'étiquette du corps pour CSS. Je ne sais pas si cela fonctionne parce que je ne dirige pas Windows et que j'ai un PowerPC, mais il devrait mettre une classe de .ie6 à tous les explorateurs Internet 6-9, pas très utile. Utilisez Moomodernizr pour tout le reste.
if (Browser.Engine.trident) {
var IEbrowser = $('body');
IEbrowser.addClass('ie');
}