2

プロジェクトでは、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>
4

1 に答える 1

1

コードをof ページに入れると、ブラウザーは文字列内に</script>ある (script タグの終わり) を実際の終了として検出するようです。head

ここに画像の説明を入力

これが、Web ページでエラーがスローされる理由です (例):

Uncaught SyntaxError: Unexpected token ILLEGAL fiddle.jshell.net/:22

main.jsたとえば、JavaScriptコードを別のファイルに移動する必要があると思います。

ローカルでテストしたところ、動作しました:

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

詳細については、この質問を参照してください。

于 2013-07-02T07:50:43.250 に答える