在符合W3C规则的情况下在JavaScript字符串中使用HTML标记
-
06-07-2019 - |
题
这是我的代码:
<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
,确保我的页面不会搞乱,我该如何解决这个问题?
解决方案
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<br />More text');"
这与"
元素形成对比,<script>
元素的内容为CDATA
,因而不是<![CDATA[
- 在HTML4中进行转义。在XHTML中没有CDATA元素;你可以添加一个<=>部分来使XHTML的行为相同,但是对于脚本元素和事件处理程序属性来说通常更简单,只是从不使用<=>或<=>字符来避免问题。在字符串文字中,可以使用另一个转义符来解决此问题:
onmouseover="showDescription('Text', 'Text with HTML tags in them\x3Cbr />More text');"
其他提示
您可以将函数包装在文档中其他位置的单独<script>...</script>
标记内,并使用...
<script>
//<![CDATA[
...code...
//]]>
</script>
来自 http://javascript.about.com/library/blxhtml.htm:
要解决这个问题,你可以做两件事之一。最简单的方法,特别是如果Javascript包含的不仅仅是一行或两行,就是使页面外部的Javascript导致它们在脚本标记之间无效,以阻止页面验证。
如果它只是一行或两行,则可能不值得制作外部脚本,因此您需要将内容保留在脚本标记之间,并告诉验证者要忽略这一点。我们通过将Javascript代码放在像这样的CDATA标签中来实现这一点......
有很多方法可以实现目标。
- 使用
<
或<
代替<
使用>
或>
代替>
- 获取图片的ID,例如<!>“; image1 <!>”;然后
document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text');
醇>
希望这有效。
<
将%3C
替换为>
,%3E
将<=>替换为<=>,并在输出内容时使用unescape。
这不会验证:
function(){
return ('<b> bold </b>');
}
这给出了相同的结果和验证:
function(){
return unescape('%3Cb%3E bold %3C/b%3E');
}
如何将其放入<!> 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">