web-dev-qa-db-ja.com

JavaScriptファイルをページに動的に追加する方法

Scriptaculous.jsファイルが必要なjavascriptファイルを動的にインクルードするのを見てきました。 JavaScriptを動的にインクルードするより良い方法はありますか。

たとえば、次のようなjsファイルを含めたいと思います。

<script src="single.js?files=first.js,second.js,third.js..."></script>

どうすれば効率的な方法でそれを行うことができますか？

javascriptjqueryprototypejsscriptaculous
33
Hoque

.jsまたは.cssファイルを動的に読み込むには、簡単に言うと、DOMメソッドを使用して、最初に派手な新しい「SCRIPT」または「LINK」要素を作成し、適切な属性を割り当て、最後にelement.appendChild（）を使用することを意味しますドキュメントツリー内の目的の場所に要素を追加します。それは実際よりもはるかに派手に聞こえます。すべてがどのように組み合わされるかを見てみましょう：

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

私はそれが完全に使用されることを望みます

41
Anand Thangappan

jQuery.getScript()関数を使用できます... JavaScript .jsファイル。

ここ は参照です。

13
Vivek

さまざまな方法がありますが、Googleが追加のスクリプトを読み込む方法は次のとおりです。

function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
}

これはGoogleマップローダーから直接取得されます。

スクリプトタグをドキュメントに直接書き込むのが最も簡単で効率的な方法です。

4
herostwist

サラマンAのコメントのアドバイス に続いて、Googleがアナリティクスでどのように処理するかを見つけました： https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking =

そして、同じコードのより一般的なバージョンは次のとおりです。

(function() {
    var s = document.createElement('script'); // Create a script element
    s.type = "text/javascript";               // optional in html5
    s.async = true;                           // asynchronous? true/false
    s.src = "//example.com/your_script.js"; 
    var fs = document.getElementsByTagName('script')[0];  // Get the first script
    fs.parentNode.insertBefore(s, fs);
})();
2
Luke

新しいjavascriptファイルを動的に追加するには：

function includeJS(jsFile) {
    $('head').append($('<script>').attr('type', 'text/javascript').attr('src', jsFile));
}


// Pick a JS to load
if ($.browser.msie) {
    includeJS('first.js');
} else {
    includeJS('second.js');
}
includeJS('third.js');
1
Justin808

Scriptaculous Loaderの機能を確認しました。それは、ドキュメント内のすべてのスクリプトタグを調べて、それ自体をロードしたものを見つけることです、例えば：

<script src="/path/to/single.js?files=first.js,second.js,third.js"></script>

次に、src属性内で使用されるクエリ文字列を解析し、各スクリプトファイルに追加のスクリプトタグを動的に作成します。同時に、ベーススクリプト（/path/to/single.js）同じパスを使用して依存関係ファイルを読み込みます（例：/path/to/first.js）。

このような独自のスクリプトローダーを作成できます。バニラjavascriptでは、次の関数を使用できます。

Anand Thangappanは、これらの機能を使用するソリューションを投稿しました。 jQueryやMooToolsなどのフレームワークを使用している場合は、両方が動的にJsvaScriptをロードする独自の実装を提供します。

最後に、問題に対するサーバー側のソリューションがあります。 minify をご覧ください。複数のCSSまたはJavaScriptファイルを1つのダウンロードに結合して縮小します。

1
Salman A

スクリプトを追加したらコールバックを実行できるように、これをすばやく拡張できます。

function loadjscssfile(filename, filetype, callback){
    if (typeof fileref!="undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref);
        callback();
    }
}
0
Dennis Bartlett

インラインで動作するdocument.ready（）がある場合、document.getElementsByTagName("head")[0].appendChild(fileref‌​)は機能しません。 $("head").append(fileref);は私には最適ですが、jquery.min.jsインラインリファレンス。

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <script src="script/jquery.min.js"></script>
    <script src="script/master_load.js"></script>
    <script>
        load_master_css();
        load_master_js();
    </script>
</head>

およびmaster_load.js：

function loadjscssfile(filename) {
    if (filename.substr(filename.length - 4) == ".css") { // 'endsWith' is not IE supported.
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("href", filename)
        //fileref.setAttribute("type", "text/css")
    }
    else if (filename.substr(filename.length - 3) == ".js") {
        var fileref = document.createElement('script')
        fileref.setAttribute("src", filename)
        //fileref.setAttribute("type", "text/javascript")
    }
    $("head").append(fileref);
}
function load_master_css() {
    loadjscssfile("css/bootstrap.min.css");
    // bunch of css files
}
function load_master_js() {
    loadjscssfile("script/bootstrap.min.js");
    // bunch of js files
}
0
AmirHossein Manian