0

PHP スクリプトに対して AJAX 要求を行う Web ページがあります。その PHP スクリプトは有効な JSON オブジェクトで応答し、Content-typeヘッダーを に設定しapplication/jsonます。

JSON 形式は次のとおりです ( JSON 応答のconsole.log(JSON.stringify(data))where で報告されているように)。data

{
    "content": "<script type=\"text/javascript\">console.log(\"test\");</script>"
}

data次に、「コンテンツ」のクラスで div を作成します (私の AJAX responseText JSON オブジェクトであることを思い出してください)。

var content = document.createElement("div");
content.setAttribute("class", "content");
content.innerHTML = data.content;

最後に、コンテンツ div をサイトの既存の div に追加します。

existingDiv.appendChild(content);

Google Chrome の開発者ツールのタブでソースを調べelementsます。これは、実際の DOM ノードと単なるテキストをうまく示しているからです。スクリプト ブロックは DOM ノードとして表示されます。

残念ながら、スクリプトは実行されず、開発者ツール コンソールにconsole.log("test");出力されません。test

これまでに見た唯一のオプションはeval()、ペストのように避けようとしているものを使用することです。また、コンテンツにスクリプト ブロック以外のものが含まれている場合もあります。他の HTML マークアップも含めることができます。

私は何が欠けていますか？この動的に追加された Javascript のブロックを実行するにはどうすればよいですか?

jQuery ソリューションは許容されます。

4

3 に答える 3

1

考えられる解決策は、次のように使用することnew Function()です。

$(document).ready(function(){
   var script = "window.alert('hi')";
   new Function(script)();
});

スクリプトが実行されていない理由については、次のコードで示されているように、@Pointy が提案したものです (ただし、完全に + それを回避する方法ではありません)。

<script type='text/javascript'>
$(document).ready(function()
{
    $("<script type='text/javascript'>window.alert('hi');<\/script>").appendTo(document.body); // this will work

    var container = document.createElement("div"); // this won't work
    container.innerHTML = "<script type='text/javascript'>window.alert('hi');<\/script>";
    document.body.appendChild(container);

    var script = document.createElement("script"); // this will
    script.innerHTML = "window.alert('hi');";
    document.body.appendChild(script);
});
</script>

編集: 要求された単体テストを追加しました: http://jsperf.com/eithed-hvsa

于 2013-02-08T14:27:06.123 に答える
1

$.getScript()シンプルで、キャッシュ可能で、簡単な:

http://api.jquery.com/jQuery.getScript/

(明らかに、jscode と変更ヘッダーを含む json を生成するサーバー スクリプトを修正する必要があります)

于 2013-02-08T14:11:02.197 に答える
1

設定はタグ.innerHTMLを評価しません。<script>それはブラウザが行うことではありません。

実行する JavaScript を返す必要がある場合は、<script>簡単に に渡すことができるように、(タグなしで)文字列として送信することをお勧めしますeval()。

編集直接設定する代わりに jQuery を使用してこれを行いinnerHTML(つまり、 を使用する場合$(something).html())、コンテンツを DOM 内の何かに直接追加する場合 (つまり、インスタンス化されているが DOM に追加されていない要素だけでなく)、 jQuery は積極的に<script>コンテンツを見つけて抽出し、評価します。

于 2013-02-08T14:06:50.573 に答える