Usando tags HTML em cordas JavaScript no respeito das regras do W3C
-
06-07-2019 - |
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?
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<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á.
- Use
<
ou<
vez de<
Use>
ou>
vez de>
- 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