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

101

これを機能させるのに問題があります。最初にスクリプトタグを文字列として設定してから、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()その文字列だけをブラウザに出力します。

誰かが<script>ページの読み込み後に、理想的にはjQueryを介してブラウザにタグを動的に追加する方法を教えてもらえますか？

— ダグ
ソース

<script>ドキュメントにタグを追加することで何を達成しようとしているのか説明できますか？

— 先のとがった

@Rocketの答えが最善ですが、文字列からインラインスクリプトを確実に追加したい場合は、それをeval()関数に渡すだけです。しかし、eval()ほとんどの場合、を使用すると、実行しようとしていることを実行するためのより良い方法があることが示唆されます。

— Nick

ページの最後までサードパーティの広告の読み込みを延期しようとしています。これらの広告は2つのスクリプトタグを介して呼び出されるため、動的にそれらをスローするページの読み込み後に関数を実行したいと思いました。

— Doug

2

すべてのサードパーティスクリプトが延期できるように設計されているわけではありません。スクリプトが使用しdocument.write、ページのロード後にそれを呼び出すと、ページが破棄されます。

— ボビンス

1

<iframe>要素にそれらのタグをインポートしないのはなぜですか？<iframe>準備ができるまで、URLの設定を延期できます。

— 先のとがった

103

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

例：

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

— ロケット防護
ソース

2

ありがとう、しかしそれはそれをDOMに突き刺すでしょうか？重要な情報を省略したことに気づきました。スクリプトタグをDOMに挿入して評価する必要があります。この時点で、特定の<div>でサイトに表示するサードパーティの広告コードが返されます。

— Doug

1

$.getScriptAJAX経由で.jsファイルをロードして実行するだけです。スクリプトは、ページのdivにアクセスできるようにするためにDOM内にある必要はありません。

— ロケットHazmat

6

ただし$.getScript()、スクリプトでは、同じドメイン上にあるか、リモートドメインとブラウザの両方がサポートされている必要がありCORSます。

— ヒッピートレイル2012

14

@hippietrail実際にはそうではありません。CORSや同じドメインを必要としないプレーンなol 'スクリプトタグを挿入するだけです。これを使用して、たとえばGoogle Analyticsをロードするためのコードを短縮しましたが、問題なくロードされます。実際に実行される実際のjqueryコードは、実際にはGAスニペットとかなり似ています。

— Chris Moschini 2013年

39

@hippietrailからの回答は4つの賛成票で最も注目を集めるので、彼が正しくないことを明確に示す必要があります。jQueryドキュメントの$.ajaxメモで強調されているように、「スクリプトとJSONPリクエストは同じオリジンポリシー制限の対象ではありません。」ソース。言い換えれば、$.getScript自分だけではなく、他のドメインから.jsファイルをプルできます。

— EleventyOne 2013

64

以下を試してください：

<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

— バッセム
ソース

4

+1を使用appendしてスクリプトを追加します。Appendを使用すると、インラインスクリプトでもすぐに評価されます（必要なものだけ）。ありがとう

— コーディング

1

このアプローチでは、IE8 / 9で多くの問題が発生します。つまり、スタックオーバーフローエラーです。この作業を全面的に行うために、以下の$ .getScript（）メソッドを使用しました。

— zmonteca 2013

1

はい@jcofflandこれは2010年10月に書かれた:)

— Bassem

このコードを含むページがAJAXを使用して読み込まれると、ブラウザーは「メインスレッドでの同期XMLHttpRequestはエンドユーザーのエクスペリエンスに悪影響を与えるため廃止されました」という警告をスローします。

— Rajshekar Reddy 2016

@Reddy素晴らしいコメント。これは2010年10月に投稿されたもので、今ではこの方法が有効で推奨されていない方法であると確信しています。ユーザーは独自の裁量で続行する必要があります。

— Bassem

34

これが、モダン（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');
});

— jcoffland
ソース

3

または、代わりに.text（ 'some script here'）と書くことができます.attr（ 'src'、 'path_to_your_js_file'）

— Serhii Maksymchuk

11

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

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

このフォームを使用してcssを読み込むこともできます。

— イマン
ソース

6

あなたは、文字列を入れないようにしたいかもしれません</script>、それは問題を解析引き起こす可能性があるためけれども、あなたのソースに：stackoverflow.com/questions/236073/...

— IX3

2

最後のエスケープは/私のためにトリックをしました：$('head').append('<script src="your.js"><\/script>');

— jerik

5

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

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

— ddlab
ソース

ところで。同じことをスタイルシートでも行います：if（！$（ 'head> link [href = "widgets / css / widgets.css"]'）。length）{$（ 'head'）。append（$（ '<link / > '）。attr（' rel '、' stylesheet '）。attr（' href '、' widgets / css / widgets.css '））;}

— ddlab

2

ハックのように聞こえる回避策が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行に終了タグを追加すると機能しません。

こういう時は、ゼロで割ったような気がします。

— 灰
ソース

3

ブラウザがそれを文字列リテラルではなくスクリプトの終了タグとして認識しているため、終了スクリプトタグが1つになっている場合は機能しません。

— コーディング終了

1

<\/script>ただし、有効です

— SP

@TrueBlueAussieのポイントは、「理由を聞かないでください...しかし興味深いことに、1行に終了タグを追加すると機能しません」というコメントへの応答にあったと思います。彼は、「わからない」よりも良い答えを望んでいる読者なら誰でも簡単に見つけられるように、その理由を説明しました。次も参照してください：javascript.crockford.com/script.html

— iX3 '29

1

そのリンクによると、@ Sathvikは正しいです。Ashのコメントは、削除されたコメントに対する返信のようです。

— Arlen Beiler 2016年

2

例：

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

ここに、より明確な方法があります。jQueryが不要です。これにより、の最後の子としてスクリプトが追加されます<body>。

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

ただし、スクリプトを追加してロードする場合は、Rocket Hazmatの方法を使用します。

— ガギク・サルグシャン
ソース

-4

動的に生成されたJavaScriptを実行しようとしている場合は、を使用することでわずかに改善することができますeval。ただし、JavaScriptは非常に動的な言語であるため、実際にその必要はありません。

スクリプトが静的である場合、ロケットの- getScript提案が進むべき道です。

— マグナール
ソース