Est-ce que les données HTML5 attributs personnalisés « travail » dans IE 6?
Question
attributs de données personnalisée: http: // dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data
Quand je dis « travail », je veux dire, si j'ai HTML comme ceci:
<div id="geoff" data-geoff="geoff de geoff">
est le code JavaScript suivant:
var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);
produits, dans IE 6, une alerte avec « de geoff geoff » en elle?
La solution
Vous pouvez récupérer les valeurs de mesure (ou vos propres) en utilisant les attributs getAttribute
. Suite à votre exemple avec
<div id="geoff" data-geoff="geoff de geoff">
Je peux obtenir la valeur de l'aide data-geoff
var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));
Voir MSDN . Et bien qu'il y est mentionné que vous avez besoin IE7 pour obtenir ce travail, je l'ai testé ce il y a un moment avec IE6 et il a fonctionné correctement (même en mode bizarreries).
Mais cela n'a rien à voir avec des attributs spécifiques HTML5, bien sûr.
Autres conseils
Oui, ils travaillent.
IE a soutenu getAttribute()
de IE4 qui est ce que jQuery utilise en interne pour data()
.
data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js
Vous pouvez utiliser la méthode de .data()
jQuery ou à la vanille simple JavaScript:
HTML Exemple
<div id="some-data" data-name="Tom"></div>
Javascript
var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);
jQuery
var name = $("#some-data").data("name");
Non seulement IE6 prend pas en charge les données HTML5 attribut caractéristique, en fait pratiquement pas navigateur actuel prend en charge les! La seule exception au moment est Chrome.
Vous êtes parfaitement libre d'utiliser data-geoff="geoff de geoff"
comme un attribut, mais seulement Chrome des versions du navigateur en cours vous donnera la propriété .dataGeoff
.
Heureusement, tous les navigateurs actuels - y compris IE6 -. Peut faire référence à des attributs inconnus en utilisant la méthode standard DOM .getAttribute()
, donc .getAttribute("data-geoff")
fonctionnera partout
Dans un avenir très proche, les nouvelles versions de Firefox et Safari va commencer à soutenir les attributs de données, mais étant donné qu'il ya une très bonne façon de accessessing il qui fonctionne dans tous les navigateurs, alors il n'y a vraiment aucune raison d'être en utilisant le HTML5 méthode qui ne fonctionne que pour certains de vos visiteurs.
Vous pouvez en savoir plus sur l'état actuel de soutien à cette fonctionnalité CanIUse.com .
L'espoir qui aide.
Je pense que IE a toujours soutenu ce (au moins à partir de IE4) et vous pouvez y accéder à partir de JS. Ils ont été appelés « propriétés expando ». Voir ancien article MSDN
Ce comportement peut être désactivé en réglant le expando propriété false sur un élément DOM (il est vrai par défaut, le expando Propriétés travail par défaut).
Edit: fixe l'URL
Si vous voulez récupérer toutes les données d'attributs personnalisés à la fois comme la propriété de jeu de données dans les navigateurs plus récents, vous pouvez faire ce qui suit. Voilà ce que je l'ai fait et fonctionne très bien pour moi dans IE7 +.
function getDataSet(node) {
var dataset = {};
var attrs = node.attributes;
for (var i = 0; i < attrs.length; i++) {
var attr = attrs.item(i);
// make sure it is a data attribute
if(attr.nodeName.match(new RegExp(/^data-/))) {
// remove the 'data-' from the string
dataset[attr.nodeName.replace(new RegExp('^data-'), '')] = attr.nodeValue;
}
}
return dataset;
}
IE6 , il ne fonctionne pas. Pour référence: MSDN
Je suggère d'utiliser jQuery pour traiter la plupart des cas:
var geoff = $("#geoff").data("data-geoff");
alert(geoff);
Essayez ceci dans votre codage.