Mit HTML-Tags in JavaScript-Strings, während sie mit W3C-Regeln einhalten

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

Frage

Hier ist mein Code: 

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

Der W3C Markup Validator nicht so. Es will keine HTML-Tags in meinem JavaScript-Code. Hier ist die Fehlermeldung es erzeugt, wenn ich dies versuchen:

  

Zeichen „<“ ist das erste Zeichen eines Begrenzer aber aufgetreten als Daten

Wie kann ich dieses Problem beheben gleichzeitig aber dafür sorgen, dass meine Seite tut Schlamassel nicht, wenn ich den HTML-Tag enthaltenden String übergeben document.getElementById('myElement').innerHTML?

War es hilfreich?

Lösung 

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

Wie bei allen Attributwerte müssen Sie HTML-kodieren &, <, und das Attribut Trennzeichen (" hier). Die Tatsache, dass es JavaScript in den Attributwert macht keinen Unterschied; der HTML-Attribut-Wert decodiert, bevor Sie JavaScript ein Blick auf wird es. 

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

Dies ist im Gegensatz zu einem <script> Elemente, dessen Inhalts CDATA und somit nicht &-entkam in HTML4. In XHTML gibt es keine CDATA Elemente; Sie können einen <![CDATA[ Abschnitt hinzufügen zu XHTML verhalten sich die gleiche machen, aber es ist in der Regel einfacher für beide Script-Elemente und Event-Handler-Attribute nur das Problem zu vermeiden, indem er nie einen & oder < Zeichen. In einem Stringliteral eine andere Flucht zur Verfügung, die Sie, dies umgehen können: 

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

Andere Tipps

Sie können Ihre Funktionen in separaten <script>...</script> Tags irgendwo anders im Dokument wickeln, und es verwendet ... 

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

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

  

Um dieses Problem zu beheben Wer eines von zwei Dingen tun kann. Die einfachste Art und Weise, insbesondere wenn der Javascript enthält mehr als nur eine oder zwei Zeilen, ist die Javascript außerhalb der Seite in ihrem Wesen nichts resultierende zwischen dem Script-Tags, um der Seite Validieren zu stoppen.

     

Wenn es nur ein oder zwei Zeilen ist, dann ist es wahrscheinlich nicht lohnt sich ein externes Skript, so dass Sie den Inhalt zwischen den Script-Tags lassen wollen und den Validator sagen, dass dies ignoriert werden. Wir tun dies, indem Sie den Javascript-Code in einem CDATA-Tag wie folgt platzieren ...

Es gibt viele Möglichkeiten, um dorthin zu gelangen.

  1. Verwenden Sie &#60; oder &lt; statt <
    Verwenden Sie &#62; oder &gt; statt >
  2. Get a id auf das Bild, wie "image1", dann document.getElementById("image1").onmouseover = showDescription(
    'Text', 'Text with HTML tags in them<br />More text');

Hoffe, dass dies funktioniert.

Ersetzen < durch %3C und > von %3E und Verwendung unescape wenn die Inhalte ausgibt.

Dies wird nicht bestätigen: 

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

Dies gibt die gleichen Ergebnisse und bestätigt: 

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

Wie wäre es damit in einem Putting

scroll top