$.html 将脚本呈现为内容答案

【问题标题】：$.html renders script as content$.html 将脚本呈现为内容
【发布时间】：2013-07-02 07:18:51
【问题描述】：

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

在 jquery 1.8.3 中：

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

显示一个带有“测试”内容的警报框，而在较新的 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>

【问题讨论】：

你能在jsfiddle.net上做一个可重现的例子吗？
如果你想在服务器上的单独文件上制作模板并在加载后显示它，我建议你使用backbonejs。我看到你有 HTML 和一些要执行的方法。 Backbonejs 正是为这类事情而设计的。
小提琴：jsfiddle.net/arunpjohny/ZGxK7/1
@retanik 是您的脚本在单独的文件中吗？
带有视图类的 html 和 javascript 在不同的文件中。例如 /index.html?page=Visualization，加载一些数据并最终加载包含新内容和 javascript 的 visualisation.html。奇怪的是，在 1.8.3 中一切正常，更高版本的工作正常，但另外在我的页面中呈现

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

【解决方案1】：

当我们将代码放在@ 987654328@的页面。

这就是网页报错的原因（EXAMPLE）：

Uncaught SyntaxError: Unexpected token 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);
});

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

解决方案

1。从 jQuery 创建脚本

var content = $("#content");

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

content.append(script)

1。使用`&`

基本上你必须用&lt替换<，用&gt替换>，用&amp替换&，如this answer中所述：

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

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

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

欲了解更多信息，请参阅this question。

【讨论】：

解决这个问题的方法也可以是，转义字符串中的 HTML 并在输出时对其进行解码，即stackoverflow.com/questions/5499078/…
解决方案对我不起作用，请查看我对上述问题的反应

HTML

Javascript (main.js)

解决方案

1。从 jQuery 创建脚本

1。使用&amp;

1。使用`&`