Come si scrive il codice XHTML 1.0 Strict valido quando si utilizza JavaScript per riempire un elemento che richiede un figlio?

Question

Sto gestendo il mio sito attraverso il validatore del W3C cercando di farlo convalidare come XHTML 1.0 Strict e sono arrivato a un errore di convalida particolarmente appiccicoso (almeno nella mia esperienza). Sto includendo alcuni badge da vari servizi nel sito che forniscono la propria API e il proprio codice per l'inclusione in un sito esterno. Questi badge utilizzano javascript (per la maggior parte) per riempire un elemento inserito nel markup che richiede un figlio. Ciò significa che alla fine viene generato un markup perfettamente valido, ma per il validatore tutto ciò che vede è un tag padre-figlio incompleto sul quale viene quindi visualizzato un errore.

Come avvertimento, capisco che potrei lamentarmi con i servizi che i loro badge non convalidano. Inoltre, suppongo che qualcuno abbia convalidato il proprio codice includendo badge come questo, ed è quello che mi interessa. Risposte come "Lamentati con Flickr sul loro badge" non mi aiuteranno molto.

Un avvertimento aggiuntivo: preferirei che il markup rimanga semantico. OSSIA Aggiungere un tag li vuoto o una coppia tr-td per convalidarlo sarebbe una soluzione indesiderabile , anche se potrebbe essere necessario. Se questo è l'unico modo per convalidare, vabbè, ma per favore, inclina le risposte verso il markup semantico.

Ad esempio:

<div id="twitter_div">
<h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=1"></script>
</ul>
</div>

Nota i tag ul che avvolgono il javascript. Questo alla fine viene riempito con lis tramite lo script, ma per il validatore vede solo l'ul non popolato.

Grazie in anticipo!

Answer 1

Il seguente frammento è XHTML valido ed esegue il lavoro:

<div id="twitter_div">
    <h2 class="twitter-title"><a href="http://twitter.com/stopsineman" title="Tim's Twitter Page.">Twitter Updates</a></h2>
    <div id="myDiv" />
</div> 

<script type="text/javascript">
    var placeHolderNode = document.getElementById("myDiv");
    var parentNode = placeHolderNode.parentNode;
    var insertedNode = document.createElement("ul");
    insertedNode .setAttribute("id", "twitter_update_list");
    parentNode.insertBefore( insertedNode, placeHolderNode);
    parentNode.remove(placeHolderNode);
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=5"></script>

Answer 2

Forse potresti usare javascript per scrivere il badge HTML iniziale? Probabilmente vorresti che il codice badge fosse inserito nel tuo documento se javascript fosse disponibile per popolarlo, giusto?

Dovresti solo assicurarti che la scrittura del tuo documento avvenga prima del javascript per i tuoi vari badge.

Potresti dare un esempio specifico di HTML / link a una pagina con il codice non valido?

Answer 3

Le soluzioni potrebbero essere diverse per ciascun badge. Nel caso di Twitter, puoi semplicemente scrivere la tua funzione di richiamata. Ecco un esempio basato sul loro codice badge:

<div id="twitter_div">
  <h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
  <div id="twitter_update_list"></div>
</div>

<script type="text/javascript">
function updateTwitterCallback(obj)
{
  var twitters = obj;
  var statusHTML = "";
  var username = "";
  for (var i = 0; i < twitters.length; i++)
  {
    username = twitters[i].user.screen_name;
    statusHTML += ('<li><span>' + twitters[i].text + '</span> <a style="font-size:85%" href="http://twitter.com/' + username + '/statuses/' + twitters[i].id + '">' + relative_time(twitters[i].created_at) + '</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = '<ul>' + statusHTML + '</ul>';
}
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=updateTwitterCallback&amp;count=1"></script>

Answer 4

Ho messo un < li > con " display: nessuno " nel < ul > Tag:

<ul id="twitter_update_list"><li style="display:none;">A</li></ul>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/01241.json?callback=twitterCallback2&amp;count=1"></script>

Questo non disturba lo script e in questo caso funziona, e penso che non sia una " indesiderabile soluzione " :)

Answer 5

Ad un certo punto la pagina diventa valida, giusto? Questa è l'unica volta che può davvero essere convalidato.

Non sono sicuro che una pagina non banale rimarrà valida in ogni momento durante la sua costruzione se è costruita con molti script DOM.

Answer 6

Questa potrebbe non essere l'opinione più popolare su questo argomento, ma ...

Non preoccuparti della convalida al 100%. Non è un grosso problema.

Il punto di convalida è rendere il markup il più standard possibile. Perché? Perché i browser a cui viene assegnato un markup non conforme alle specifiche (ad es. Markup che non convalida) fanno il loro errore controllando per correggerlo e visualizzano la pagina nel modo in cui intendevi che apparisse all'utente. La qualità del controllo degli errori del browser varia, yadda-yadda-yadda, è meglio avere un markup valido ... Ma non è nemmeno il tuo codice a causare il fallimento della validazione! Le persone che hanno scritto quei badge probabilmente li hanno testati su più browser (e dovresti fare lo stesso, ovviamente), se funzionano come previsto, lascialo.

In breve, non ci sono premi per la convalida :)