Rilevare il supporto per un dato evento JavaScript?
-
04-10-2019 - |
Domanda
Mi interessa utilizzando l'evento hashchange JavaScript per monitorare i cambiamenti nella identificatore di frammento del URL. Sono consapevole di i plugin jQuery per questo storia realmente semplice e. Tuttavia, ho raggiunto la conclusione che nel mio particolare progetto non è davvero la pena il aggiunto sovraccarico di un altro file JS.
Quello che mi piacerebbe fare, invece, è prendere il percorso "progressive enhancement". Cioè, voglio verificare se l'evento hashchange è supportato dal browser del visitatore, e scrivo il mio codice di usarlo se è disponibile, come un accessorio piuttosto che una caratteristica fondamentale. IE 8, Firefox 3.6 e Chrome 4.1.249 sostegno, e che conti per circa il 20% del traffico del mio sito.
Quindi, uh ... c'è qualche modo per verificare se un browser supporta un evento particolare?
Grazie.
Soluzione
Bene, l'approccio migliore non sta attraversando sniffing del browser, Juriy Zaytsev ( @kangax ) ha fatto un metodo molto utile per il supporto evento rilevazione:
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;
})();
Utilizzo:
if (isEventSupported('hashchange')) {
//...
}
Questa tecnica viene ora utilizzato in alcune librerie come jQuery .
Per saperne di più qui:
Altri suggerimenti
Il documentazione Mozilla suggerisce la seguente:
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
Questo funziona in IE8 e Chrome 5 beta troppo (non ho la prova Chrome 4.1), e non riesce correttamente in Opera e Safari.
Ecco una modifica della risposta fornito da CMS , che non contiene una funzione in un altro, che ho pensa possa funzionare:
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;
}