2016-09-21 5 views
0

私は1つの文字列に保存され、私のページに渡される一連のJavaScriptライブラリを持っています。私たちはいくつかの第三者コードを読み込んでおり、それらはページに置かなければならない複数の機能を持っています。ウェブサイトの性質上、これらのライブラリの一部のデータは、ページがロードされるまで利用できません私たちにデータを渡してください)。ダイナミックに挿入されたjavascriptファイルを別のものの後に強制的に実行させるにはどうすればよいですか?

ページrecievesは、次のようになります。これらの「ライブラリ」の1 ...

//"myId123" is generated on the page, sent to the server, and the server returns with the following two script tags as a single string 
<script src="https://my.3rdparty.com/path/to/script.js"></script> 
<script> 
    myFunction({id:"myId123") 
</script> 

(彼らはその後、私はコレクションにそれを解析のjQueryを使用して、1つの文字列として一緒に渡されるものの例

myFunction()は、そのすぐ上のスクリプトタグ(src = my.3rdparty.com/...)からロードされます。次のように操作の順序があり、明確にする

...

  1. ページは、ジェイドを介して生成
  2. ページを要求し、ブラウザにによって生成されたブラウザ
  3. セッション変数によってロード
  4. ページを送りましたフロントエンド、サーバーに送信
  5. サーバー上で生成された動的ライブラリ(フロントエンドからのデータを使用)
  6. 送信済みライブラリ私の外部スクリプトのロード/私のページを破り、実行を終了した前のフロントエンドにページに追加
  7. ライブラリ

私の問題は、現在MyFunctionを()が実行されています。

最初のスクリプトタグを強制的にロードして次のスクリプトタグの前に実行するにはどうすればよいですか?一部の 'ライブラリ'では、外部ライブラリで使用する変数を生成できるように、外部ライブラリを実行する前に順序を逆にすることができます(myFunction2()を実行する必要があります)。文字列の中で私たちに与えられた順序は、それらを実行する順序ですと仮定できます。

更新。私は()$を使用して

insertPixelLibs=function(libs){ 
    //libs is an array of these string-libraries 
    for (var i=0;i<libs.length;i++){ 
     $('#libs_div').append($(libs[i])); 
    } 
} 

...次の関数を使用して、私の「ライブラリ」を挿入し、有効なHTML要素のコレクションに文字列を変換し、それらの要素ではなくテキストとして適切に追加されているようですよ。問題はmyFunction()が定義されていないところで説明したとおりです。

+0

が奇妙に思えます...あなたのクライアントコードをイベントベースにするだけではどうですか。あなたのサーバーは、アプリケーションのライフサイクルを指示するイベントを発生させることができます。 –

+0

'ページに追加されたライブラリ'どのように?問題の関連コードを投稿してください... –

+1

2番目の回答を参照してください:http://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js –

答えて

0

この問題を解決する方法は、各セグメントを1つずつ追加する再帰関数を呼び出すことでした。ここに私のコード例があります

function insertLibraries(libs){ 
    //libs is an array containing strings of valid HTML Element(s) 
    var myLib =""; 
    for (var i=0;i<libs.length;i++){ 
     myLib = $(libs[i]); 
     insertLib(myLib,0); 
    } 
}; 
function insertLib(lib,i){ 
    //lib will be a string containing the library tag(s) to be inserted 
    $lib = $(lib);//Convert to collection of jQuery elements 
    if (typeof i != "number")i=0; 
    if (i>=$lib.length) return;//if we added the last one in this library, return 
    var myLib = $($lib[i]); 
    if (myLib.prop('nodeType')===undefined) return insertLib(lib,++i);//continue to next iteration if it's just a text node between tags 
    var newElm = document.createElement(myLib.prop('tagName'));//create a new element of the correct type 
    var src = myLib.attr('src'); 
    if (src){ 
     newElm.src = src; 
     //"onload" doesn't fire for local libraries, so we only put it on the external ones 
     newElm.onload = function(){ 
      insertLib(lib,++i)//when this finishes loading, insert the next one in it's group 
     }; 
     document.getElementById("my_div").appendChild(newElm); 
    } 
    else{ 
     var newHtml = $('<div>').html(myLib.html()).text();//this funky line basically decodes the html 
     //meaning "1 &amp; 2" will turn into "1 & 2" 
     newElm.innerHTML=newHtml;//currently only sets the HTML as text, not as a valid HTML child 
     document.getElementById("my_div").appendChild(newElm); 
     insertLib(lib,++i); 
    } 
}; 
関連する問題