Mit HTML-tags im JavaScript-strings-unter Einhaltung der W3C-Regeln

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

Den W3C-Markup-Validator nicht mag. Er will nicht die HTML-tags in meinem JavaScript-code. Hier ist die Fehlermeldung produziert, wenn ich Versuch dies:

Zeichen "<" ist das erste Zeichen ein Begrenzungszeichen ist aber aufgetreten, als Daten

Wie kann ich dieses Problem beheben und gleichzeitig sichergestellt, dass meine Seite nicht versauen, wenn ich übergeben Sie die HTML-Tags mit Zeichenfolge zu document.getElementById('myElement').innerHTML?

InformationsquelleAutor Pieter | 2009-11-28

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

    Wie mit alle Attribut-Werte müssen Sie HTML-codieren &, <, und das Attribut Trennzeichen (" hier). Die Tatsache, dass es JavaScript in die Attribut-Wert macht keinen Unterschied: das HTML-Attribut-Wert dekodiert wird, bevor JavaScript bekommt einen Blick auf Sie.

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

    Dies ist im Gegensatz zu einem <script> - element, dessen Inhalt CDATA und somit nicht &-entkam in HTML4. In XHTML gibt es keine CDATA-Elementen; Sie können hinzufügen eine <![CDATA[ Abschnitt, um XHTML Verhalten sich genauso, aber es ist in der Regel einfacher für die beiden script-Elemente und event-handler-Attribute nur das problem vermeiden, indem Sie nie mit einer & oder < Charakter. In einem string-literal-eine weitere Flucht zur Verfügung, die Sie verwenden können, um dies zu umgehen:

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

    InformationsquelleAutor bobince

  2. 5

    Könnten Sie wickeln Ihre Funktionen in separaten <script>...</script> - tags irgendwo im Dokument, und es verwenden ...

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

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

    Um dieses problem zu beheben wer kann eines von zwei Dingen tun. Der einfachste Weg, besonders wenn der Javascript-Code enthält mehr als nur ein oder zwei Zeilen, ist, um die Javascript externe Seite gehend, dass nichts zwischen den script-tags, damit die Seite validieren.

    Wenn es nur ein oder zwei Zeilen, dann ist es wahrscheinlich nicht Wert, dass ein externes script, so dass Sie verlassen wollen, um den Inhalt zwischen den script-tags und sagen, der validator, dass dies ignoriert wird. Wir tun dies, indem Sie den Javascript-code in einem CDATA-tag wie diesem ...

    InformationsquelleAutor miku

  3. 4

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

    1. Verwenden &#60; oder &lt; statt <

      Verwenden &#62; oder &gt; statt >
    2. Bekommen eine id zu dem Bild, wie z.B. "image1", dann
      document.getElementById("image1").onmouseover = showDescription(
      'Text', 'Text with HTML tags in them<br />More text');

    Hoffe, das funktioniert.

    InformationsquelleAutor ricky

  4. 1

    Ersetzen < durch %3C und > durch %3E und verwenden, unescape, wenn er den Inhalt.

    Dieser nicht Valide ist:

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

    Dieser gibt die gleichen Ergebnisse und bestätigt:

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

    InformationsquelleAutor Claude Schlesser

  5. -1

    Wie Sie darum, dies innerhalb eines <script ...> block:

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

    Später in Ihre HTML:

    <a href="#">
    <img src="myimage.jpg" 
     onmouseover="showDescription(
          'Text', myText);" 
     onmouseout="revertDescription();" 
     alt="Image description">
    Die erste <script> block nicht kompatibel, weil Sie < und > im inneren.
    Nicht, wenn Sie wickeln Sie dort Ihren code mit //<![CDATA[... //]]> wie vorgeschlagen, durch Die MYYN. Ich schlug vor, dass diese Herangehensweise, da Sie nicht definieren, inline-Skript-Befehle, die als CDATA -

    InformationsquelleAutor synhershko

Schreibe einen Kommentar