Aggiornamento quando HTMLElement.dataset aggiornamenti

Question

sto usando la funzione CSS attr per collegare in modo dinamico il valore di un attributo data-* al contenuto di un elemento pseudo:

body::after { content: attr(data-after) } 

Sto quindi aggiornare regolarmente quell'attributo dati tramite la proprietà HTMLElement.dataset:

setInterval(function() { 
    document.body.dataset.after = new Date; 
}, 1000); 

sto notando che in Internet Explorer, anche se tutte queste caratteristiche sono supportate, lo pseudo-elemento non sta avendo la sua proprietà contenuti aggiornati al r efletti le modifiche più recenti.

Ho costruito un violino per dimostrare il problema. Puoi vederlo online here.

Cosa posso fare per aggirare questa limitazione?

Answer 1

C'è un bug/limitazione noto in Internet Explorer in questo momento che fa sì che gli pseudo elementi a non vengano aggiornati quando i dataset si aggiornano. Un sufficiente work-around è quello di aggiornare invece gli attributi con il setAttribute vecchio metodo (e quindi più ampio sostegno):

setInterval(function() { 
    // Work-around for IE bug: http://stackoverflow.com/q/28031707 
    document.body.setAttribute("data-after", new Date); 
}, 1000); 

È possibile see the results here.

Un bug è stato archiviato contro questo problema internamente e i gruppi di funzioni appropriati dovrebbero valutare l'argomento in un prossimo triage. Appena possibile, avremo i cicli di sviluppo assegnati per risolvere la questione.

Answer 2

IE tende ad avere un sacco di problemi.

jQuery è una libreria JavaScript popolare creata con la risoluzione di problemi cross-browser. È possibile utilizzare la funzione di jQuery .attr() per impostare gli attributi di dati, in questo modo:

setInterval(function() { 
    $('body').attr('data-after', new Date()); 
}, 1000); 

See: http://api.jquery.com/attr/

In alternativa, si può considerare di usare il metodo di jQuery .data([key], [value]).

Nota: Prestare attenzione all'utilizzo di date con Internet Explorer, nella mia esperienza non è in grado di analizzare alcuni formati di data ISO 8601 comuni. Suggerirei un'altra libreria per la gestione di date e orari: moment.js