Question

我正在对我正在处理的网站进行一些安全测试，并且我遇到了一些我似乎无法解释的行为。在jsFiddle中可以看到一个简化示例，其中包含HTML：

<div id="test">This is a test!</div>

和javascript：

$(function(){
    $('#test').mouseover(function(){
       $(this).innerHtml = "test*<script>alert('mouse over fired!');</script>*test"; 
    });
});

令我惊讶的是这个渲染（没有鼠标移动......）：

*test"; }); }); });//]]>
This is a test!

我觉得这很奇怪所以我添加了警告like so：

$(function(){
    $('#test').mouseover(function(){
        alert("</script>");
       $(this).innerHtml = "test*<script>alert('mouse over fired!');</script>*test"; 
    });
});

同样，我很惊讶，因为这次我的鼠标悬停事件在页面加载后立即触发。我认为它可能是一个jsFiddle错误，所以我创建了一个simple HTML document，但它有相同的行为。我能够在Chrome，Safari和Firefox中重现。

任何人都可以解释为什么会发生这种情况吗？

Answer 1

更改为：

$(function(){
    $('#test').mouseover(function(){
       $(this).html("test*<script>alert('mouse over fired!');<" + "/script>*test"); 
    });
});

您需要拆分</script>，以便不会将其解释为原始<script>代码的结尾。

此外，innerHTML是DOM属性，而不是jQuery属性。如果要执行脚本，请使用jQuery的.html()方法;分配给.innerHTML不会执行脚本。你的名字也错了，它是.innerHTML，而不是.innerHtml - Javascript区分大小写。

DEMO

Answer 2

如果我理解正确，您希望在该元素是mouseOvered时显示警报。如果是这种情况，则以下代码为：

$(function(){
    $('#test').mouseover(function(){
        alert('mouse over fired!');
    });
});

Answer 3

如果要执行警报脚本并始终更改div内容，则需要在此函数中包含alert命令，如下所示：

$(function(){
    $("#test").mouseover(function(){
       $("#test").html("test* *test") ;
        alert('mouse over fired!');
    });
});

鼠标悬停事件没有明显原因？

3 个答案: