2

这是我的代码:

<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 标记。如果我尝试这样做,这是它产生的错误消息:

字符“<”是分隔符的第一个字符,但作为数据出现

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

4

5 回答 5

5

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

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

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

要解决这个问题,我们可以做两件事之一。最简单的方法,特别是如果 Javascript 包含不止一两行,是使 Javascript 位于页面外部,导致它们在脚本标记之间没有任何内容,以停止页面验证。

如果它只有一两行,那么可能不值得制作外部脚本,因此您需要将内容留在脚本标签之间并告诉验证器这将被忽略。我们通过将 Javascript 代码放在这样的 CDATA 标记中来做到这一点......

于 2009-11-28T15:31:53.070 回答
5

有很多方法可以到达那里。

  1. 使用&#60;or&lt;代替<
    使用&#62;or&gt;代替>
  2. 获取图片的id,比如“image1”,然后 document.getElementById("image1").onmouseover = showDescription(
    'Text', 'Text with HTML tags in them<br />More text');

希望这有效。

于 2009-11-28T15:36:15.900 回答
1
onmouseover="showDescription('Text', 'Text with HTML tags in them<br />More text');" 

与所有属性值一样,您必须对&,<和属性分隔符("此处)进行 HTML 编码。属性值内部是 JavaScript 的事实没有区别;HTML 属性值在 JavaScript 查看它之前被解码。

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

这与元素形成对比,<script>元素的内容在 HTML4 中被转义,CDATA因此不会被转义。&在 XHTML 中没有 CDATA 元素;您可以添加一个<![CDATA[部分以使 XHTML 的行为相同,但是对于脚本元素和事件处理程序属性来说,通过从不使用&<字符来避免问题通常更简单。在字符串文字中,可以使用另一种转义符来解决此问题:

onmouseover="showDescription('Text', 'Text with HTML tags in them\x3Cbr />More text');" 
于 2009-11-28T15:37:49.237 回答
1

输出内容时替换<by%3C>by%3E并使用 unescape。

这不会验证:

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

这给出了相同的结果并验证:

function(){
return unescape('%3Cb%3E bold %3C/b%3E'); 
}
于 2012-02-07T11:01:43.453 回答
0

把它放在 <script ...> 块中怎么样:

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">
于 2009-11-28T15:32:21.383 回答