Question

这是我的代码：

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

W3C标记验证器不喜欢这个。它不希望我的JavaScript代码中包含HTML标记。以下是我尝试此操作时产生的错误消息：

字符“＆lt;”是分隔符的第一个字符，但是作为数据出现

如果我将包含HTML标记的字符串传递给document.getElementById('myElement').innerHTML，确保我的页面不会搞乱，如何解决这个问题？

Answer 1

您可以将函数包装在文档中其他位置的单独<script>...</script>标记内，并使用...

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

来自http://javascript.about.com/library/blxhtml.htm：

要解决这个问题，你可以做两件事之一。最简单的方法，特别是如果Javascript包含的不仅仅是一行或两行，就是使页面外部的Javascript导致它们在脚本标记之间无效，以阻止页面验证。

如果它只是一行或两行，则可能不值得制作外部脚本，因此您需要将内容保留在脚本标记之间，并告诉验证者要忽略这一点。我们通过将Javascript代码放在像这样的CDATA标签中来实现这一点......

Answer 2

有很多方法可以实现目标。

使用<或<代替<
使用>或>代替>
获取图像的ID，例如“image1” document.getElementById("image1").onmouseover = showDescription( 'Text', 'Text with HTML tags in them<br />More text');

希望这有效。

Answer 3

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

与所有属性值一样，您必须对&，<以及属性分隔符（"）进行HTML编码。事实上，它在属性值中的JavaScript没有区别;在JavaScript查看之前解码HTML属性值。

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

这与<script>元素形成对比，CDATA元素的内容为&，因此不是<![CDATA[ - 在HTML4中进行转义。在XHTML中没有CDATA元素;你可以添加一个&部分来使XHTML的行为相同，但是对于脚本元素和事件处理程序属性来说通常更简单，只是从不使用<或onmouseover="showDescription('Text', 'Text with HTML tags in them\x3Cbr />More text');"字符来避免问题。在字符串文字中，可以使用另一个转义符来解决此问题：

{{1}}

Answer 4

将<替换为%3C，将>替换为%3E，并在输出内容时使用unescape。

这不会验证：

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

这给出了相同的结果和验证：

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

Answer 5

如何将其放入＆lt; script ...＆gt;块：

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

稍后在您的HTML中：

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

在符合W3C规则的情况下在JavaScript字符串中使用HTML标记

5 个答案: