Utilisation des balises HTML dans les chaînes JavaScript tout en respectant les règles du W3C

Question

Voici mon code:

<a href="#"> 
    <img src="myimage.jpg" 
    onmouseover="showDescription(
      'Text', 'Text with HTML tags in them<br />More text');" 
    onmouseout="revertDescription();" 
    alt="Image description"> 

Le W3C Markup Validator n'aime pas. Il ne veut pas de balises HTML dans mon code JavaScript. Voici le message d'erreur, il produit si je tente ceci:

caractère « < » est le premier caractère d'un delimiter mais se sont produits sous forme de données

Comment puis-je résoudre ce problème tout en vous assurant que ma page doesn ne pas gâcher si je passe la chaîne contenant la balise HTML à document.getElementById('myElement').innerHTML?

Answer 1

onmouseover="showDescription('Text', 'Text with HTML tags in them<br />More text');" 

Comme avec toutes les valeurs d'attribut, vous devez en code HTML &, < et le séparateur d'attribut (" ici). Le fait que ce soit JavaScript à l'intérieur de la valeur de l'attribut ne fait aucune différence; la valeur de l'attribut HTML est décodée avant que JavaScript ne la détecte.

onmouseover="showDescription('Text', 'Text with HTML tags in them<br />More text');" 

Ceci est en contraste à un élément <script>, dont le contenu est CDATA et donc pas & encodée dans HTML4. En XHTML, il n'y a pas d'éléments CDATA; vous pouvez ajouter une section <![CDATA[ pour que XHTML se comporte de la même manière, mais il est généralement plus simple pour les éléments de script et les attributs de gestionnaire d'événements d'éviter le problème en n'utilisant jamais un caractère & ou <. Dans une autre chaîne littérale évasion est disponible que vous pouvez utiliser pour contourner ceci:

onmouseover="showDescription('Text', 'Text with HTML tags in them\x3Cbr />More text');" 

Answer 2

Vous pouvez envelopper vos fonctions à l'intérieur <script>...</script> séparés balises ailleurs dans le document, et utiliser ...

<script> 
//<![CDATA[ 
    ...code... 
//]]> 
</script> 

De http://javascript.about.com/library/blxhtml.htm:

Pour résoudre ce problème wer peut faire l'une des deux choses. Le moyen le plus simple, en particulier si le Javascript contient plus d'une ou deux lignes, est de rendre le Javascript externe à la page résultant en leur étant rien entre les balises de script pour arrêter la validation de la page.

S'il ne s'agit que d'une ou deux lignes, cela ne vaut probablement pas la peine de créer un script externe; vous devrez donc laisser le contenu entre les balises de script et dire au validateur que cela doit être ignoré. Nous faisons cela en plaçant le code Javascript dans une balise CDATA comme ça ...

Answer 3

Que diriez-vous de mettre cela dans un script < ...> Bloc:

var myText = 'Text with HTML tags in them<br />More text'; 

Et plus tard dans votre code HTML:

<a href="#"> 
    <img src="myimage.jpg" 
    onmouseover="showDescription(
      'Text', myText);" 
    onmouseout="revertDescription();" 
    alt="Image description"> 

Dernière question

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Questions connexes

• Aucun problème connexe^_^