web-dev-qa-db-ja.com

ページの読み込み後にjQueryを介して<script>タグを動的に挿入する方法

これを機能させるのに問題があります。最初にスクリプトタグを文字列として設定してから、ページの読み込み後にjquery replaceWith（）を使用してドキュメントに追加しました。

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

しかし、その変数で文字列リテラルエラーが発生しました。次に、文字列を次のようにエンコードしてみました。

var a = '&left;script type="text/javascript"&gt;some script here&lt;\/script&gt;';

しかし、それをreplaceWith()に送信すると、その文字列だけがブラウザに出力されます。

ページの読み込み後、理想的にはjQueryを使用して、ブラウザに<script>タグを動的に追加する方法を教えてください。

javascriptjqueryscript-tagjavascript-injection
94
Doug

スクリプトを別のファイルに配置し、 $.getScript を使用してロードして実行できます。

例：

$.getScript("test.js", function(){
    alert("Running test.js");
});
97
Rocket Hazmat

以下を試してください：

<script type="text/javascript">
// Use any event to append the code
$(document).ready(function() 
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://scriptlocation/das.js";
    // Use any selector
    $("head").append(s);
});

http://api.jquery.com/append

61
Bassem

モダン（2014）JQueryでそれを行う正しい方法は次のとおりです。

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .appendTo('head');
})

または、divを本当に置き換えたい場合は、次のようにします。

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .replaceAll('#someelement');
});
32
jcoffland

より簡単な方法は次のとおりです。

$('head').append('<script type="text/javascript" src="your.js"></script>');

このフォームを使用してcssをロードすることもできます。

9
iman

この答えは、jcofflandが答えたものと技術的に類似または同等です。スクリプトが既に存在するかどうかを検出するクエリを追加しました。これが必要なのは、いくつかのモジュールがイントラネットWebサイトで働いており、そのうちのいくつかはスクリプトを共有または独自に持っていますが、これらのスクリプトを毎回ロードする必要がないためです。実稼働環境で1年以上使用されているため、このスニペットを使用しています。自分へのコメント：はい、知っています。関数が存在するかどうかを尋ねる方が正しいでしょう... :-)

if (!$('head > script[src="js/jquery.searchable.min.js"]').length) {
    $('head').append($('<script />').attr('src','js/jquery.searchable.min.js'));
}
5
ddlab

例：

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

動作するはずです。私はそれを試してみました;同じ結果。しかし、私がこれを使用したとき：

var length = 1;
var html = "";
for (var i = 0; i < length; i++) {
    html += '<div id="codeSnippet"></div>';
    html += '<script type="text/javascript">';
    html += 'your script here';
    html += '</script>';
}
$('#someElement').replaceWith(a);

これは私のために働いた。

編集：#someelementを忘れました（ただし、慣例により#someElementを使用したい場合があります）

ここで最も重要なのは+ =なので、htmlは追加され、置き換えられません。

うまくいかなかった場合はコメントを残してください。私はあなたを助けたいです！

2
santinobonora

ハックのように聞こえる回避策が1つあり、それが最もエレガントな方法ではなく、100％動作することに同意します。

AJAX応答は次のようなものであるとします

<b>some html</b>
<script>alert("and some javscript")

意図的に終了タグをスキップしたことに注意してください。次に、上記をロードするスクリプトで、次の手順を実行します。

$.ajax({
    url: "path/to/return/the-above-js+html.php",
    success: function(newhtml){
        newhtml += "<";
        newhtml += "/script>";
        $("head").append(newhtml);
    }
});

理由を聞かないでください:-)これは、必死のほぼランダムな試行の結果として失敗したものの1つです。

どのように機能するかについて完全な提案はありませんが、興味深いことに、終了タグを1行で追加すると機能しません。

このような時代に、私は無事にゼロで割ったように感じます。

2
Ash

JQueryを必要としないはるかに明確な方法を次に示します。これにより、<body>の最後の子としてスクリプトが追加されます。

document.body.innerHTML +='<script src="mycdn.js"><\/script>'

ただし、addおよびloadスクリプトで Rocket Hazmatの方法 。

0
Gagik Sargsyan