web-dev-qa-db-ja.com

JS変数を使用して、<script>タグのsrc属性を設定します

同じjspの別のタグの「src」属性としてjavascript変数を使用したい。

<script>
var link = mylink // the link is generated based on some code
</script>

以下に示すように、この新しい要素を作成します。

<script src="mylink">
</script>

さまざまなフォーラムを検索して、次のオプションを使用してみましたが、機能しないようです。このことをすべての主要なブラウザーで動作させたいです。

  1. このコードを最初の要素に配置します。

    var script   = document.createElement("script");
    script.type  = "text/javascript";
    script.src   = "path/to/somelink";
    document.body.appendChild(script);
    
  2. 最初の要素でドキュメント書き込みメソッドを使用します。

    document.write("<script type='text/javascript' src="+ google.com + "><\/script>");
    
  3. 最初の要素にJSTL変数を設定して使用しようとしました。

    <c:set var="URL" value="mylink"/>
    

これらの方法はどれも成功しませんでした。何が間違っているのかについての提案はありますか?

29
1985percy

CDATAは正常に機能しますが、document.createElementを使用することも最適です。特に、キャッシュの無効化などのために、URLに値を追加する場合は。

<script type="text/javascript"> 
    var JSLink = "/Folder/sub_folder/version.js?version=" + Math.random();
    var JSElement = document.createElement('script');
    JSElement.src = JSLink;
    JSElement.onload = OnceLoaded;
    document.getElementsByTagName('head')[0].appendChild(JSElement);

    function OnceLoaded() {
        // Once loaded.. load other JS or CSS or call objects of version.js
    }
</script>

よくコード.. :)

17
Mahesh

私は選択肢2に似たものを使用します。 「google.com」は引用符で囲む必要があるため、コードにわずかな間違いがあります。

互換性を向上させるために、次のように記述できます。

document.write("<script type='text/javascript' src='"+ x + "'><\/scr" + "ipt>");

この場合、xが含まれるファイルになります。次のように定義できます。

var x = "http://google.com/script.js";

OR

var x = "path/to/script.js";
5
Gavy

JQueryを使用できますか?その場合、getScript()を使用できます。

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

$.getScript(mylink, function() {
   // do something using the JS that was loaded.
});
4
JonWarnerNet

試してください:

(function(d){
     var file = 'yourJS.js';
     var ref = d.getElementsByTagName('script')[0];
     var js = d.createElement('script');
     js.src = file;
     ref.parentNode.insertBefore(js, ref);
}(document));

これは何をしますか:

  1. ページで最初のスクリプト要素を見つけます
  2. 指定されたソースで新しいスクリプト要素を作成します。
  3. 次に、その新しい要素を最初の既存のスクリプト要素の前に挿入します。
2
chaoskreator
<xsl:variable name="Path" select="/root/folder/"></xsl:variable> <!-- Global path variable. -->
<xsl:variable name="myScriptPath" select="concat($Path, 'myScript.js')"></xsl:variable> <!-- Relative script path variable. -->
<script src="{$myScriptPath}"/> <!-- Attach script. -->
0
Zon