domがロードされる前にjavascriptを実行する

Question

私は、使用されたフレームワークを扱うハンドルjavascriptクラスを開発したいと思っています。例えば

：

myClass.addFramework('jQuery'); // just an example 

それが正常に動作し、私のクラスは、フレームワークを追加 - DOMの準備が完了した後、フレームワークがロードされているので、それのいずれかのjQueryのコードがあった場合、それは動作しないだろう、 'jQuery'はまだ定義されていないので、jQuery(document).ready(function(){});のようなデフォルトのjQueryスニペットは機能しません。

ドミノの残りの部分がすべてロードされる前に、私のaddFrameworkメソッドを実行する必要があるという「修正」スクリプトを作成することはできますか？

window.onload = function() 
{ 
Javascript code goes here 
} 

外部のライブラリに依存関係がないと、文書がロードされたときに、あなたのJavascriptを実行する：

Answer 1

あなたはonloadイベントを使用する必要があります。あなたはそのようにそれを実装することができます

myClass.addFramework('jQuery', function() { 
    // do stuff after jquery loaded. 
}); 

：

myClass.addFramework = function (name, onload) { 
    var _script = document.createElement('script'); 
    _script.onload = function() { 
     onload(); 
    } 
    _script.onreadystatechange = function() { 
     if (this.readyState == 'complete') onload(); 
    } 
    _script.src = myClass.FRAMEWORK_BASE + '/' + name + '.js'; 
    document.getElementsByTagName('head')[0].appendChild(_script); 
}; 

Answer 2

のjQueryのdocument.ready機能は、基本的にこれを行います。

また、あなたはロード後にスクリプトを実行するために、この小さなライブラリを使用することができますrequire.js

Answer 3

で見たいと思うかもしれません： Yepnope javascript loader

また、あなたは、AJAX呼び出しを経由してスクリプトをダウンロードすることができます。成功したコールバックでは、ドキュメントに追加してスクリプトのコードを実行します。しかし、このアプローチはすでにYepnopeライブラリで使用されています。

Answer 4

カスタムイベントの使用はどうですか？このような何か：

var CustomEvent = function() { 
    this.eventName = arguments[0]; 
    var eventAction = null; 
    this.subscribe = function(fn) { 
     eventAction = fn; // you can customize this to hold array of handlers 
    }; 
    this.fire = function(sender, eventArgs) { 
     if (eventAction != null) { 
      eventAction(sender, eventArgs); 
     } else { 
      alert('No ' + mEventName + ' handler!'); 
     } 
    }; 
}; 

今、あなたはこのような何かを定義することができます

var myEvent = new CustomEvent("Framework Loaded"); 
myEvent.subscribe(function(sender, eventArgs) { 
    alert('Framework loaded! Hurray!'); 
    // jQuery goes here 
}); 

を例えばフレームワークのjQueryをロードした後あなたはこの操作を行います。

myEvent.fire(null, { framework: 'jQuery' }); 

（あなたが置く必要がありますがおそらくXHRハンドラのどこかにコードがあります）。

また、DOMを読み込んだ後に起動すると、jQueryの$(document).ready(...)ラッパーについて忘れることがあります。

Answer 5

あなたのクラスはjQueryの依存関係を持っているようですが、理想的には依存関係を持たないようにしてください。あなたが動的にjQueryをロードするための簡単な方法を探しているとはいえ場合

、多分これは役立つだろう： scriptタグを作成中

function onReady(){ 
    // My Custom Ready state. lets go wild here. 
} 

if (typeof jQuery === undefined || jQuery.fn.jquery !== '1.7.2') { 

    var jScript = document.createElement('script'); 
    jScript.setAttribute("type", "text/javascript"); 
    jScript.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js") 

    //Run onReady() once jQuery and document have loaded 
    jScript.onload = function() { //Add on load Event delegate 
     //JQuery is Loaded!! so you can do whatever you want with it to deligate. 
     $(document).ready(onReady) 
    }; 
    jScript.onreadystatechange = function() { //Same thing but for IE 
     if (this.readyState == 'complete' || this.readyState == 'loaded')(function() { 
      //JQuery is Loaded!! so you can do whatever you want with it to deligate. 
      $(document).ready(onReady) 
     }); 
    } 

    // Append Script to the Head 
    document.getElementsByTagName("head")[0].appendChild(script_tag); 

} else { 
    // JQuery Exists so lets just use it 
    $(document).ready(onReady); 
}