Czy niestandardowe atrybuty danych HTML5 „działają” w przeglądarce IE 6?

173

Niestandardowe atrybuty danych: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

Kiedy mówię „praca”, mam na myśli, jeśli mam taki HTML:

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

będzie następujący JavaScript:

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

wytworzyć w IE 6 ostrzeżenie z „geoff de geoff”?

Paul D. Waite
źródło
117
HTML5 i IE6? Horror ... O_o
Vivin Paliath
7
Zauważ, że data-geoffnie jest to prawidłowy identyfikator JS ze względu na znak „-”. Musisz użyć dataGeoffw skryptach.
wyjazd z
3
@outis: Według specyfikacji (w wersji roboczej), masz na myśli? Sam przetestowałem to w FF 3.6 i Chromium 5.0.307.11 i pobieranie geoff.dataGeoffnie działało. Okazało się ( whatwg.org/specs/web-apps/current-work/multipage/... ), że powinny być geoff.dataset.geoff, ale element.datasetnadal jest undefinedw nowoczesnych przeglądarkach, to nie obsługiwanych.
Marcel Korpel
7
Jeffth of the Jeffth, dziewiętnaście jeffty-jeff.
Matt Sach,
2
@ANeves: chociaż umożliwia to dostęp do właściwości ze znakami nieidentyfikującymi, nie ma to zastosowania w tym przypadku, ponieważ przeglądarka nie łączy atrybutu HTML „data-geoff” z właściwością o tej samej nazwie w DOM.
wyjazd

Odpowiedzi:

153

Możesz pobrać wartości atrybutów niestandardowych (lub własnych) za pomocą getAttribute. Naśladując twój przykład z

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

Potrafię ocenić wartość data-geoffużywania

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

Zobacz MSDN . I chociaż jest tam wspomniane, że potrzebujesz IE7, aby to działało, testowałem to jakiś czas temu z IE6 i działało poprawnie (nawet w trybie dziwactw).

Ale to oczywiście nie ma nic wspólnego z atrybutami specyficznymi dla HTML5.

Marcel Korpel
źródło
4
W sumie nie jest to rzeczywista obsługa atrybutów danych HTML5. Jednak brzmi to jak sposób na ich wykorzystanie.
Paul D. Waite,
Popraw to nie obsługuje API danych umieszczających rzeczy w kolekcji lub cokolwiek (nikt tego nie obsługuje, tak). Jednak, jak pokazuje get / Set Attribute, główne użycie atrybutów danych można uzyskać natychmiast w każdej przeglądarce z minimalną obsługą DOM. Prawdopodobnie możesz też małpować przeglądarki poprawek, jeśli jesteś tak skłonny do tworzenia brakujących kolekcji. Z moich ostatnich eksperymentów w książkach jasno wynika, że ​​atrybuty danych są teraz użyteczne i znacznie przewyższają obecny wspólny schemat przeciążania wartości atrybutu klasy, aby zawierała informacje o stylu i losowe metadane.
Thomas Powell
„Prawdopodobnie przydałbyś się też w przeglądarkach z łatkami, jeśli masz taką skłonność do tworzenia brakujących kolekcji”. - Tak, to jest fajna rzecz w JavaScript w porównaniu z CSS: ponieważ jest to język programowania, możesz samodzielnie rozwiązać problemy ze zgodnością.
Paul D. Waite,
Jestem naprawdę zdumiony, że ta odpowiedź wciąż cieszy się dużym uznaniem, zwłaszcza że według wielu twórców stron internetowych IE 6 należy uważać za „martwą”.
Marcel Korpel
6
@ Marcel: Myślę, że wiele witryn nadal ma IE 6 jako istotną część ich odbiorców. Może w następnych 10 lat nie będziemy musieli martwić się już więcej.
Paul D. Waite,
141

Tak, działają.

IE obsługuje getAttribute()z IE4, do czego wewnętrznie używa jQuery data().

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

Możesz więc użyć .data()metody jQuery lub zwykłego waniliowego JavaScript:

Przykładowy kod HTML

<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");
Marko
źródło
2
Ta odpowiedź wydaje się być nieco sprzeczna z canIuse. Jakieś uwagi dotyczące tego, dlaczego jest oznaczony jako „częściowo” obsługiwany? caniuse.com/dataset
Snekse
8
@Snekse Myślę, że jest to związane z notatką na doleNote: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.
Marko
@Marko A co <div lala="Tom"></div>, czy to byłoby w porządku w IE6? Jak odczytasz wartość?
Royi Namir
@RoyiNamir Uważam, że powinno działać poprawnie z każdym atrybutem, ale najlepiej sprawdź. Nigdzie nie mam pod ręką IE6.
Marko
Chciałbym, żeby jquery po prostu
zniknęło
9

IE6 nie tylko nie obsługuje funkcji atrybutu danych HTML5, w rzeczywistości praktycznie żadna aktualna przeglądarka ich nie obsługuje! Obecnie jedynym wyjątkiem jest Chrome.

Możesz używać go data-geoff="geoff de geoff"jako atrybutu, ale tylko Chrome w aktualnych wersjach przeglądarek zapewni Ci tę .dataGeoffwłaściwość.

Na szczęście wszystkie obecne przeglądarki - w tym IE6 - mogą odwoływać się do nieznanych atrybutów przy użyciu standardowej .getAttribute()metody DOM , więc .getAttribute("data-geoff")będą działać wszędzie.

W najbliższej przyszłości nowe wersje Firefoksa i Safari zaczną obsługiwać atrybuty danych, ale biorąc pod uwagę, że istnieje doskonały sposób na uzyskanie do nich dostępu, który działa we wszystkich przeglądarkach, to naprawdę nie ma powodu, aby używać metody HTML5, która będzie działa tylko dla niektórych odwiedzających.

Więcej informacji o obecnym stanie wsparcia dla tej funkcji można znaleźć na stronie CanIUse.com .

Mam nadzieję, że to pomoże.

Spudley
źródło
1
„IE6 nie tylko nie obsługuje funkcji atrybutu danych HTML5, w rzeczywistości praktycznie żadna obecna przeglądarka ich nie obsługuje” - oczywiście, chociaż zależy to od definicji „wsparcia”. Żadna przeglądarka nie obsługuje tej datasetwłaściwości, ale wszystkie przeglądarki umożliwiają przechowywanie danych w atrybutach z przedrostkiem data-i (jak mówisz) pobieranie ich za pośrednictwem getAttribute. Dlatego w pewnym sensie obsługują tę funkcję, ponieważ można skutecznie używać samych atrybutów.
Paul D. Waite
Rozumiem jednak, że nie ma powodu, aby korzystać z tej datasetnieruchomości, aby uzyskać do nich dostęp - nie wiem, jakie korzyści ma ona oferować getAttribute.
Paul D. Waite
2
@Paul - nie oferuje żadnych korzyści w porównaniu z getAttribute. To, co oferuje, to ustandaryzowany sposób obsługi przechowywania danych względem tagu przy użyciu atrybutów. To zawsze działało, ale nie było oficjalnym standardem aż do HTML5. HTML5 po prostu przejął istniejącą niestandardową, ale szeroko używaną funkcję i ratyfikował ją, dodając pewne reguły mówiące, jak należy je nazwać, i definiując nowy sposób uzyskiwania do nich dostępu. Kiedy mówię, że to nie jest obsługiwane, wyraźnie odnoszę się do .dataXYZwłaściwości; jak mówisz, podstawowe funkcje są szeroko obsługiwane, ale nie dlatego, że jest to HTML5.
Spudley
7

Myślę, że IE zawsze to obsługiwał (przynajmniej zaczynając od IE4) i możesz uzyskać do nich dostęp z JS. Nazywano je „właściwościami ekspandowania”. Zobacz stary artykuł MSDN

To zachowanie można wyłączyć, ustawiając właściwość expando na false elementu DOM (domyślnie jest to prawda, więc właściwości expando działają domyślnie).

Edycja: naprawiono adres URL

Timory
źródło
Ach, tak, przepraszam, myślę, że nie o to mi chodziło. Właśnie zredagowałem pytanie, aby wyjaśnić.
Paul D. Waite,
Przepraszam, link był błędny. Wyjaśnił, jak wyłączyć to zachowanie, zamiast wyjaśniać funkcję. Poprawiłem link i tekst.
Timores,
1
getAttribute działa w różnych przeglądarkach, nie musisz tu polegać na dziwactwach IE.
głupiec
wspaniale, dziękuję. Fajny artykuł, pokocham „Witaj w pierwszej kolumnie DHTML Dude”.
Paul D. Waite
4

Jeśli chcesz pobrać wszystkie niestandardowe atrybuty danych jednocześnie, takie jak właściwość zestawu danych w nowszych przeglądarkach, możesz wykonać następujące czynności. To właśnie zrobiłem i działa świetnie dla mnie w 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;
}
user1767210
źródło
0

W IE6 może nie działać. Dla odniesienia: MSDN

Sugeruję użycie jQuery do obsługi większości przypadków:

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

Spróbuj tego w swoim kodowaniu.

Programista HTML5
źródło
W IE6 to działa (zobacz zaakceptowaną odpowiedź ) i nie pytałem o jQuery.
Paul D. Waite
@Paul D. Waite: Przepraszam, przez pomyłkę odrzuciłem twoją flagę spamu. To wygląda podejrzanie.
BoltClock
@BoltClock: to całkiem w porządku. Propozycja kodu jest w rzeczywistości dość rozsądna, ale ten link czytnika wiadomości jest oczywiście całkowicie niepowiązany.
Paul D. Waite
Dlaczego więc 4 lata później wciąż tu jest?
Dan Pantry