¿Cómo se escribe un código estricto válido de XHTML 1.0 cuando se usa JavaScript para completar un elemento que requiere un hijo?

Question

Estoy ejecutando mi sitio a través del validador del W3C tratando de validarlo como XHTML 1.0 Strict y he llegado a un error de validación particularmente pegajoso (al menos en mi experiencia). Incluyo ciertas insignias de varios servicios en el sitio que proporcionan su propia API y código para su inclusión en un sitio externo. Estas insignias usan javascript (en su mayor parte) para llenar un elemento que inserte en el marcado que requiere un hijo. Esto significa que al final, se genera un marcado perfectamente válido, pero para el validador, todo lo que ve es una etiqueta padre-hijo incompleta en la que luego arroja un error.

Como advertencia, entiendo que podría quejarme de los servicios que sus insignias no validan. Sin esto, supongo que alguien ha validado su código al incluir insignias como esta, y eso es lo que me interesa. Respuestas como, 'Quejarse a Flickr sobre su insignia' no me ayudarán mucho.

Una advertencia adicional: preferiría que, en la medida de lo posible, el marcado siga siendo semántico. ES DECIR. Agregar una etiqueta li vacía o un par tr-td para validarla sería una solución indeseable , aunque sea necesario. Si esa es la única forma en que se puede validar, bueno, pero inclina las respuestas hacia el marcado semántico.

Como ejemplo:

<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>

Observe las etiquetas ul que envuelven el javascript. Esto finalmente se completa con lis a través del script, pero para el validador solo ve el ul despoblado.

¡Gracias de antemano!

Answer 1

El siguiente fragmento es XHTML válido y hace el trabajo:

<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

¿Quizás podría usar javascript para escribir la insignia HTML inicial? Probablemente solo desee que el código de la insignia se inserte en su documento si JavaScript estuviera disponible para llenarlo, ¿verdad?

Solo necesitaría asegurarse de que la escritura de su documento ocurra antes del javascript para sus diversas insignias.

¿Podría dar un ejemplo específico del enlace HTML / a una página con el código no válido?

Answer 3

Las soluciones pueden ser diferentes para cada insignia. En el caso de Twitter, puede escribir su propia función de devolución de llamada. Aquí hay un ejemplo basado en su código de insignia:

<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

Puse un < li > con " display: none " en el < ul > Etiqueta:

<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>

Esto no perturba el script y en este caso funciona, y creo que no es una solución & "; indeseable &"; :)

Answer 5

En algún momento la página se vuelve válida, ¿verdad? Esa es la única vez que realmente se puede validar.

No estoy seguro de que una página no trivial siga siendo válida en todos los puntos durante su construcción si está construida con una gran cantidad de secuencias de comandos DOM.

Answer 6

Esta podría no ser la opinión más popular sobre este tema, pero ...

No se preocupe por la validación al 100%. Simplemente no es un gran problema.

El punto de validación es hacer que su marcado sea lo más estándar posible. ¿Por qué? Debido a que los navegadores que reciben un marcado que no se ajusta a la especificación (p. Ej., Marcado que no valida) hacen su propia verificación de errores para corregirlo y mostrar la página de la forma en que pretendía que fuera para el usuario. La calidad de la comprobación de errores de los navegadores varía, yadda-yadda-yadda, es mejor tener un marcado válido ... ¡Pero ni siquiera es su código lo que hace que la validación falle! Las personas que escribieron esas insignias probablemente las probaron en varios navegadores (y usted debe hacer lo mismo, por supuesto), si funcionan como se esperaba, simplemente déjelo así.

En resumen, no hay premio por validar :)