前提・実現したいこと
ご回答いただいた皆様には申し訳ございませんが、本件ReOpenさせてください。
ご回答いただいた、mts10806様、yambejp様 有難うございました。
本件、再度本文に記載させていただきます。
以下、「試したこと」の欄に継続して記載させていただきます。
HTMLとJavaScriptとを用いて
”ローカル”にある複数の任意の外部スクリプトに定義してある連想配列データ(WeeklyData.js)をHTML上で選択取込みし、その後、
その取込んだデータを、別名で定義したグローバル変数として現ページ上で保持し、
様々な演算処理に利用したいと考えております。
発生している問題・エラーメッセージ
jQueryの$.getScriptを利用して外部スクリプトであるWeeklyData.jsの
取込み処理を行った後、内部スクリプトにて新たに定義したグローバル変数に
代入しようとするも、外部データが取り込まれる前に代入処理がおこなわれているのか
undefinedとエラーとなってしまいます。
該当のソースコード
先ず外部データであるWeeklyData.jsの中身ですが、以下の様に単純に連想配列データを記載したものです。
Javascript
1var data1 =[ 2 { Period : "Apr1-7", 3 DataID : "ID0001", 4 val1 : 10, 5 val2 : 15, 6 val3 :20, 7 val4 : 25, 8 val5 : 30, 9 } 10 ]; 11var data2 =[ 12 { Period : "Apr1-7", 13 DataID : "ID0002", 14 val1 : 0, 15 val2 : 5, 16 val3 : 10, 17 val4 : 15, 18 val5 : 30, 19 }
上記の様なデータが多数続きます。仮にここでは10個の配列データとします。
次に上記のデータを取込み、別名のグローバル変数として再定義する為に
以下のようにgetScriptを用いて、取込み完了後にfoo()という関数で
別のグローバル変数へ代入する方法を試みました
HTML
1<html> 2<header> 3 <!-- JQuery DL --> 4 <script src ="../jQuery/jquery-3.3.1.min.js"></script> 5 6 <script> 7 // Grobal variavle assignment 8 for(var i=1; i<=10; i++){ 9 eval("var W1" + i +"data = []");//別名グローバル変数を準備 10 } 11 </script> 12 13 <script> 14 //準備した別名グローバル変数に取込んだデータを代入する関数foo()を用意 15 var foo1 = function(){ 16 for(var j = 1; j<= 10; j++){ 17 eval("W1" + j +"data =" + "data" + j); 18 } 19 } 20 var foo2 = function(){ 21 for(var j = 1; j<= 10; j++){ 22 eval("W2" + j +"data =" + "data" + j); 23 } 24 } 25 </script> 26 27 <script> 28 // 外部データを取込んだあと別名で定義したグローバル変数に代入する処理 29 $.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()}); 30 </script> 31 <script> 32 // 別フォルダに存在する同名のWeeklyData.jsを上記と同様に行う処理 33 $.getScript("../2018/Apr/Week2/WeeklyData.js",function(){foo2()}); 34 </script> 35</header> 36<body> 37 ---- 38 ---- 39</body> 40</html>
試したこと
yambejp様からご回答いただいた以下の内容でChromeでは
起動オプション「--allow-file-access-from-file」を追加することで、
ローカルにあるScriptを読み込むことができたのですが、IE11で確認すると
読み込めない状況でした、
Javascript
1$(function(){ 2 $.when( 3 $.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()}), 4 $.getScript("../2018/Apr/Week2/WeeklyData.js",function(){foo2()}) 5 ).done(function(){ 6 console.log(W11data); 7 console.log(W21data); 8 }); 9});
そこで、調べてみたところ、jQueryの読み込みの後に、以下様にすれば
IE11でも読めるとありましたので、試してみましたが、
「WeeklyData.js」を開きますか?という表示が出力され、やはり
取込むことができませんでした。
Javascript
1 <script src ="../jQuery/jquery-3.3.1.min.js"></script> 2 <script> 3 //$.ajaxSetup({cache: false}); 4 $.ajaxSetup({ 5 xhr: function() { 6 if("ActiveXObject" in window) { 7 return new ActiveXObject("Microsoft.XMLHTTP"); 8 } 9 else { 10 return new XMLHttpRequest(); 11 } 12 } 13 }); 14 </script>
jQueryを使わない手段、もしくは使用してもIE11でローカルにある
外部スクリプトを取込める手段、ご教示いただければ幸いです。
以上、どうぞよろしくお願い致します。
1)Chromeブラウザにて、
$.getScript("../2018/Apr/Week1/WeeklyData.js",function(){foo1()});
でブレークをかけて、ステップ実行すると、取込める場合があるのですが、
通常に処理を実施すると、data1 undefinedとエラーになり
あたかもWeeklyData.js内の連想配列データが取り込まれる前にfoo()が実施された
ような動きになってしまいます。
また、
2)jQueryを用いずに
Javascript
1 <script> 2 var script = document.createElement('script'); 3 script.src = 'WeeklyData.js'; 4 document.head[0].appendChild(script); 5 </script>
で外部データを読み込み、その後にfoo1()を実施するなども試みましたが
やはりダメでした。
補足情報(FW/ツールのバージョンなど)
現状、ChromeとIE11で確認していますが、双方ともにうまく動作できない状態です。
かれこれ一週間ほどてこずっており、悩んでおります。
どなたかご教示いただければ、幸いです。
以上、どうぞよろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー