$.html отображает скрипт как контент

Для проекта я динамически загружаю контент, который состоит из HTML и JavaScript. До сих пор я использовал jquery 1.8.3, но во время очистки я хотел обновиться до 1.10.1. Я сузил свою проблему до способа, которым я использую функцию $.html() для моего содержимого div.

В 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>
Источник

1 ответ

Кажется, что браузер обнаруживает </script> (конец тега скрипта), который находится внутри строки как реальное закрытие, когда мы помещаем наш код в head страницы.

Это причина, почему ошибка появляется на веб-странице ( ПРИМЕР):

Uncaught 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);
});

Даже текстовые редакторы распознают его как закрывающий тег:

Решение

1. Создайте скрипты из jQuery

var content = $("#content");

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

content.append(script)

1. Используйте &

В основном вы должны заменить < с &lt, > с &gt а также & с &amp, как описано в этом ответе:

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

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

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

Для получения дополнительной информации см этот вопрос.

Источник
Другие вопросы по тегам