Usando tags HTML em cordas JavaScript no respeito das regras do W3C

StackOverflow https://stackoverflow.com/questions/1812773

Pergunta

Aqui está o meu código: 

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

O W3C Validador de Marcação não faz assim. Ele não quer tags HTML dentro de meu código JavaScript. Aqui está a mensagem de erro que produz se eu tentar isso:

caractere "<" é o primeiro caractere de um delimitador, mas ocorreu como dados

Como posso corrigir isso garantindo que minha página não atrapalhar se eu passar o HTML string para document.getElementById('myElement').innerHTML contendo tag?

Foi útil?

Solução 

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

Tal como com todos os valores de atributos, você deve HTML codificar &, <, eo delimitador atributo (" aqui). O fato de que é JavaScript dentro do valor do atributo não faz diferença; o valor do atributo HTML é decodificado antes de JavaScript recebe um olhar para ele. 

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

Este é em contraste com um elemento <script>, cujo conteúdo é CDATA e, portanto, não &-escapou em HTML4. Em XHTML não existem elementos CDATA; você pode adicionar uma seção <![CDATA[ fazer XHTML se comportam da mesma, mas é geralmente mais simples para ambos os elementos de script e atributos manipulador de eventos para apenas evitar o problema, não utilizando um carácter & ou <. Em uma string literal outra fuga está disponível, que você pode usar para contornar este problema: 

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

Outras dicas

Você poderia envolver as funções dentro de tags <script>...</script> separados em outro lugar no documento, e não usar ... 

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

A partir http://javascript.about.com/library/blxhtml.htm:

Para corrigir esse problema wer pode fazer uma de duas coisas. A maneira mais simples, especialmente se o Javascript contém mais do que apenas uma ou duas linhas, é fazer com que o Javascript externo para a página resultante em seu ser nada entre as tags de script para parar a página de validação.

Se é apenas uma ou duas linhas, então é provavelmente não vale a pena fazer um script externo para que você vai querer deixar o conteúdo entre as tags de script e dizer ao validador que este é para ser ignorado. Fazemos isso colocando o código Javascript dentro de uma tag CDATA assim ...

Existem muitas maneiras de chegar lá.

  1. Use &#60; ou &lt; vez de <
    Use &#62; ou &gt; vez de >
  2. Obter uma id para a imagem, como "image1", em seguida, document.getElementById("image1").onmouseover = showDescription(
    'Text', 'Text with HTML tags in them<br />More text');

espero que isso funcione.

Substituir < por %3C e > por %3E e uso unescape quando a saída de conteúdo.

Isto não validar: 

function(){
return ('<b> bold </b>');
}

Isto dá os mesmos resultados e valida: 

function(){
return unescape('%3Cb%3E bold %3C/b%3E'); 
}

Que tal colocar isso dentro de um

scroll top