Do attributi HTML5 dati personalizzato “lavoro” in IE 6?

Question

Dati attributi personalizzati: http: // dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

Quando dico “lavoro”, voglio dire, se ho HTML in questo modo:

<div id="geoff" data-geoff="geoff de geoff">

sarà il seguente JavaScript:

var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);

prodotti, in IE 6, un avviso con “Geoff de Geoff” in esso?

Answer 1

È possibile recuperare i valori di particolare (o il proprio) attributi utilizzando getAttribute. Seguendo il tuo esempio con

<div id="geoff" data-geoff="geoff de geoff">

posso ottenere il valore della data-geoff usando

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

MSDN . E anche se non v'è menzionato che è necessario IE7 per arrivare a questo lavoro, ho provato questo qualche tempo fa con IE6 e funzionava correttamente (anche in quirks mode).

Ma questo non ha nulla a che fare con gli attributi HTML5-specifici, naturalmente.

Answer 2

Sì, funzionano.

IE è supportato da getAttribute() IE4 che è ciò che jQuery utilizza internamente per data().

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

Quindi, è possibile utilizzare il metodo di jQuery .data() o plain vanilla JavaScript:

HTML di esempio

<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");

Answer 3

Non solo IE6 non supporta l'HTML5 dati Attributo caratteristica, infatti virtualmente non corrente del browser li supporta! L'unica eccezione in questo momento è Chrome.

Sei perfettamente libero di utilizzare data-geoff="geoff de geoff" come un attributo, ma solo Chrome delle attuali versioni del browser vi darà la proprietà .dataGeoff.

Per fortuna, tutti browser attuali - tra cui IE6 -. Può fare riferimento attributi sconosciuti utilizzando il metodo DOM .getAttribute() standard, in modo .getAttribute("data-geoff") funzionerà ovunque

In un futuro molto prossimo, le nuove versioni di Firefox e Safari inizierà a supportare gli attributi di dati, ma dato che c'è un modo perfetto di accessessing è che funziona in tutti i browser, allora non c'è davvero alcun motivo di utilizzare HTML5 metodo che funziona solo per alcuni dei vostri visitatori.

Si può vedere di più l'attuale stato di supporto per questa funzione in CanIUse.com .

La speranza che aiuta.

Answer 4

Credo che IE ha sempre sostenuto questa (almeno a partire da Internet Explorer 4) ed è possibile accedere da JS. Erano chiamati "proprietà expando. Vedere vecchia MSDN articolo

Questo comportamento può essere disabilitato impostando l'expando proprietà su false su un elemento DOM (è vero per impostazione predefinita, in modo che il expando Proprietà di lavoro di default).

Modifica: fissa l'URL

Answer 5

Se si voleva recuperare tutti i dati personalizzati attributi in una volta come la proprietà set di dati nei browser più recenti, si potrebbe fare quanto segue. Questo è quello che ho fatto e funziona alla grande per me in 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;
}

Answer 6

Nel IE6 , potrebbe non funzionare. Per riferimento: MSDN

Suggerisco utilizzando jQuery per gestire la maggior parte dei casi:

var geoff = $("#geoff").data("data-geoff");
alert(geoff);

Prova questo nel vostro codice.