$ .html将脚本呈现为内容

时间：2013-07-02 07:18:52

标签： javascript jquery html dom-manipulation dynamic-loading

对于一个项目，我正在动态加载由html和javascript组成的内容。到现在为止我使用的是jquery 1.8.3，但在清理时我想更新到1.10.1。 我已经将我的问题缩小到我在内容div上使用$ .html（）函数的方式。

在jquery 1.8.3中：

var content = $("#content");
contentDiv.html("<script> alert('Testing'); </script>")

显示内容为“Testing”的警告框，而在较新的jquery版本中，字符串插入DOM的代码相同，然后也会出现警告框。我希望没有显示标签。

上下文javascript： 

 this.loadPage = function(page, callback){
    $.get(page.ViewFile, function(view){
        var content = $("#content");
        $("#content").html(view);
}};

加载的页面包含，它以字符串形式存储在变量视图中。

<h1>New Content</h1>
<div id="newContent"></div>
<script>
function View(){
    this.InitializeView = function(model){
        //code
    }

    this.UpdateView = function (model){
        //code
    }
 }
 </script>

1 个答案:

答案 0 :(得分：1)

当我们输入代码时，浏览器会检测到真实结束时{<1}}（字符串内的）</script>（脚本标记的结尾）页面的head。

enter image description here

这就是为什么在网页（EXAMPLE）中抛出错误的原因：

  

未捕获的SyntaxError：意外的令牌ILLEGAL fiddle.jshell.net/:22

我猜你必须将你的javascript代码移到一个单独的文件中，例如main.js。

在本地测试并运行：

HTML 

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
        <script src="main.js"></script>
        <script type="text/javascript">
            setTimeout(function () {
                $("body").text("Testing now from HTML: using <script>");
                setTimeout(function () {
                     $("body").html("<script>alert('This alert will fail.')</script>");
                }, 1000);
            }, 2000);
        </script>
    </head>
    <body></body>
</html>

Javascript（main.js）

$(document).ready(function () {
    $("body").html("<h1>Wait one second.</h1>");
    setTimeout(function () {
        $("body").html("<script>alert('Tested')</script>");
    }, 1000);
});

即使是文本编辑器也会将其检测为结束标记：

enter image description here

解决方案

1。从jQuery创建脚本

var content = $("#content");

var script = $("<script>");
script.html("alert('Testing');");

content.append(script)

1。使用&

基本上，您必须将<替换为&lt，将>替换为&gt，将&替换为&amp，如{{3}中所述}}：

var tagsToReplace = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;'
};

function replaceTag(tag) {
    return tagsToReplace[tag] || tag;
}

function safe_tags_replace(str) {
    return str.replace(/[&<>]/g, replaceTag);
}

有关详细信息，请参阅this answer。

相关问题
最新问题