Détection du support pour un événement JavaScript donné?

Je suis intéressé par l'utilisation de l'événement JavaScript hashchange pour surveiller les modifications dans l'identifiant de fragment de l'URL. Je suis au courant de Really Simple History et les plugins jQuery pour cela. Cependant, je suis arrivé à la conclusion que dans mon projet particulier, ça ne vaut pas vraiment le coût supplémentaire d'un autre fichier JS.Détection du support pour un événement JavaScript donné?

Ce que je voudrais faire est de prendre la route "amélioration progressive". Autrement dit, je veux tester si l'événement hashchange est pris en charge par le navigateur du visiteur, et écrire mon code pour l'utiliser s'il est disponible, comme une amélioration plutôt qu'une fonctionnalité de base. IE 8, Firefox 3.6 et Chrome 4.1.249 le supportent, ce qui représente environ 20% du trafic de mon site. Donc, euh ... est-il possible de tester si un navigateur supporte un événement particulier?

Merci.

Source

2010-05-20 Will

Pour votre information, la phrase que vous cherchez est pas « amélioration progressive », mais plutôt "dégradation gracieuse". L'amélioration progressive consiste à rendre votre site Web accessible à tous les utilisateurs, mais à ajouter des fonctionnalités à un groupe d'utilisateurs plus spécifique (compatible JavaScript, compatible HTML5, etc.). La dégradation gracieuse est quand vous dépendez de certaines fonctionnalités, mais avez une méthode de sauvegarde si elle n'est pas supportée par le client. Ce n'est pas que ça importe tellement. :) –

Hmm. Je soutiens que «dégradation gracieuse» signifie qu'un site Web continue à fonctionner même lorsque la fonctionnalité sur laquelle il repose habituellement est indisponible. En revanche, "amélioration progressive" est quand un site active des fonctionnalités supplémentaires dont il ne dépend pas, seulement lorsque l'agent utilisateur les prend en charge. Je prévois d'écrire ce code particulier de telle sorte qu'il ne modifie pas la propriété location.hash à moins que l'événement hashchange ne soit disponible. Donc, c'est une amélioration progressive. Et oui, pas que ce soit vraiment important - ce ne sont que deux faces d'une même pièce. – Will

Eh bien, la meilleure approche ne passe pas par renifler navigateur, Juriy Zaytsev (@kangax) a fait une méthode très utile pour détecter le soutien de l'événement:

var isEventSupported = (function(){ 
    var TAGNAMES = { 
    'select':'input','change':'input', 
    'submit':'form','reset':'form', 
    'error':'img','load':'img','abort':'img' 
    } 
    function isEventSupported(eventName) { 
    var el = document.createElement(TAGNAMES[eventName] || 'div'); 
    eventName = 'on' + eventName; 
    var isSupported = (eventName in el); 
    if (!isSupported) { 
     el.setAttribute(eventName, 'return;'); 
     isSupported = typeof el[eventName] == 'function'; 
    } 
    el = null; 
    return isSupported; 
    } 
    return isEventSupported; 
})();

Utilisation:

if (isEventSupported('hashchange')) { 
    //... 
}

Cette technique est maintenant utilisé dans certaines bibliothèques comme jQuery.

En savoir plus ici:

Detecting event support without browser sniffing

Source

2010-05-20 20:10:08 CMS

C'est une méthode très intéressante ... J'aime particulièrement la vérification supplémentaire de voir si ''return;' 'est automatiquement converti en une fonction. – gnarf

Cela ressemble à la méthode la plus robuste. Merci de l'avoir posté! – Will

+1 pour mentionner jQuery, [jQuery est vraiment le meilleur, il résout toutes sortes de problèmes de navigateur et est bon, aussi bien] (http://www.doxdesk.com/img/updates/20091116-so-large.gif –

Le Mozilla documentation suggère ce qui suit:

if ("onhashchange" in window) { 
    alert("The browser supports the hashchange event!"); 
}

Cela fonctionne dans IE8 et la bêta Chrome 5 trop (je n'ai pas testé Chrome 4.1) et échoue correctement dans Opera et Safari.

Source

2010-05-20 20:17:59 mercator

Très élégant. Je peux utiliser une version de ce modifié avec quelques idées de l'autre réponse qui a été posté. Merci. – Will

Ne fonctionne pas pour l'événement visibilitychange. – lsborg

est ici une modification de la answer provided by CMS, qui ne contient pas de fonction dans une autre, que je pense travaillerais:

function event_exists(eventName){ 
    if(typeof(eventName)!='string' || eventName.length==0)return false; 
    var TAGNAMES = { 
     'select':'input','change':'input', 
     'submit':'form','reset':'form', 
     'error':'img','load':'img','abort':'img' 
    } 
    var el = document.createElement(TAGNAMES[eventName] || 'div'); 
    eventName = 'on' + eventName; 
    var isSupported = (eventName in el); 
    if (!isSupported) { 
     el.setAttribute(eventName,'return;'); 
     isSupported = (typeof(el[eventName])=='function'); 
    } 
    el = null; 
    return isSupported; 
}

Source

2014-09-30 15:34:03 Antkhan

Détection du support pour un événement JavaScript donné?

Répondre

Questions connexes