1
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div id="hel"></div>
<script>
txt="<script>alert('Test');</script>";
var headerIcon = '<div>hi</div>';
var messageBox = $("<div class='textDiv'><span class='sp'></span></div>");

$(document).ready(function(){
messageBox.text(txt);
//$(".textDiv .sp").text(txt);
$('#hel').append(headerIcon,messageBox);

});
</script>
</body>
</html>

输出是

hi
<script>alert("Test");</script>

但是如果我使用 $(".textDiv .sp").text(txt); 而不是 messageBox.text(txt); 输出只有 hi 当我使用 $(".textDiv .sp").text(txt); 时出了什么问题?

编辑:我不想注入 html。我只想显示为文本。但我只想知道为什么 messageBox.text(txt); 有效,但 $(".textDiv .sp").text(txt); 不

4

5 回答 5

6

text()正在转义 html 标签,如果您需要将 html 注入到您的文档中,那么使用html() http://api.jquery.com/html/

编辑:我认为$(".textDiv .sp").text(txt);它不起作用,因为在那个阶段该元素尚未注入 DOM,而您正试图从 DOM 中选择它

尝试console.log( $(".textDiv .sp") ),看看会返回什么。

于 2012-11-16T08:57:15.200 回答
2

尝试这样的事情。据我了解,它应该会有所帮助:

$(document).ready(function(){
   $('#hel').append(headerIcon,messageBox);
   $(".textDiv .sp").text(txt);
}

$(".textDiv .sp")调用时在消息框中$(".textDiv .sp").text(txt),但不在 DOM 中。这就是为什么它什么也没找到($(".textDiv .sp")只会搜索 DOM 中已经存在的元素)。另一种方法:

 $(document).ready(function(){
       $(".textDiv .sp", messageBox).text(txt);
       $('#hel').append(headerIcon,messageBox);       
    }

$(".textDiv .sp", messageBox).text('txt');- 这里的第二个参数严格说 jQuery 应该在里面搜索messageBox。是等价的to messageBox.find(".textDiv .sp").text("txt");

就像其他用户提到的那样——如果你想被"<script>alert("Test");</script>"执行——你应该使用.html而不是.text

于 2012-11-16T09:01:13.637 回答
1

代替

$(".textDiv .sp").text(txt); ,

采用

$(".textDiv .sp").html(txt);.

当您使用.text()浏览器时,您想要放置的任何内容都不会解析为 html。它将显示为简单的文本。所以就.html()改用吧。

于 2012-11-16T09:01:23.870 回答
1

顺便说一句,您的报价失败:

 txt="<script>alert("Test");</script>";

您可以转义字符串中的斜杠或使用单引号

txt="<script>alert(\"Test\");</script>"; //or
txt="<script>alert('Test');</script>";
于 2012-11-16T09:03:02.203 回答
1

检查test周围的引号。您需要使用单引号而不是双引号对其进行转义。

txt="<script>alert('Test');</script>";
于 2012-11-16T09:04:47.880 回答