Q&A
可能か不可能かという質問をされたらあなたはどう答えますか？質問の仕方で回答の方向性が決まります。（それ以前に要件不明瞭なままの丸投げなので非推奨ですけど）
前提・実現したいこと
Monacaでスマホアプリを作ろうとしています。
タブ型メニューでそれぞれのタブで違うJavaScriptを組み込みたいと思っています。
■ MENU1 → a1.html（a2.jsを利用）
■ MENU2 → b1.html（b1.jsを利用）
MENU1 → a1.htmlへの画面遷移はできるようになったのですが、a1.html内で組み込んだ
JavaScriptをうまく読み込めない状況です。
よろしくお願いいたします。
html
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/g1.css"> 14 <link rel="stylesheet" href="css/g2.css"> 15 <link rel="stylesheet" href="css/k1.css"> 16 <link rel="stylesheet" href="css/k2.css"> 17 <link rel="stylesheet" href="css/s1.css"> 18 <link rel="stylesheet" href="css/z1.css"> 19 <script src="js/a1.js"></script> 20 <script src="js/a2.js"></script> 21 <script src="js/b2.js"></script> 22 <script src="js/s1.js"></script> 23 <script src="js/zlst.js"></script> 24 <script> 25 document.addEventListener('show', function(event) { 26 var page = event.target; 27 var titleElement = document.querySelector('#toolbar-title'); 28 29 if (page.matches('#MENU1')) { 30 titleElement.innerHTML = 'MENU1'; 31 } else if (page.matches('#MENU2')) { 32 titleElement.innerHTML = 'MENU2'; 33 } 34 }); 35 </script> 36</head> 37<body> 38 <ons-page> 39 <ons-toolbar> 40 <div class="center" id="toolbar-title"></div> 41 </ons-toolbar> 42 <ons-tabbar position="auto"> 43 <ons-tab page="kl.html" icon="ICON1" label="MENU1"> 44 </ons-tab> 45 <ons-tab page="gl.html" icon="ICON2" label="MENU2"> 46 </ons-tab> 47 </ons-tabbar> 48 </ons-page> 49 50 <ons-template id="P1.html"> 51 <ons-page id="LIST1"> 52 <div id="a_list"> 53 <ul class="alist"> 54 <div id="titlek"></div> 55 </ul> 56 </div> 57 </ons-page> 58 </ons-template> 59 60 <ons-template id="kl.html"> 61 <ons-page id="KLIST"> 62 <ons-navigator id="navigator" page="P1.html"> 63 </ons-navigator> 64 </ons-page> 65 </ons-template> 66 67 <ons-template id="P2.html"> 68 <ons-page id="LIST2"> 69 <div id="b_list"> 70 <ul class="blist"> 71 <div id="titleg"></div> 72 </ul> 73 </div> 74 </ons-page> 75 </ons-template> 76 77 <ons-template id="gl.html"> 78 <ons-page id="GLIST"> 79 <ons-navigator id="navigator" page="P2.html"> 80 </ons-navigator> 81 </ons-page> 82 </ons-template> 83 84</body> 85</html> 86
HTML
1#a1.html 2<ons-page id="PK"> 3 <ons-toolbar> 4 <div class="left"><ons-back-button>BACK</ons-back-button></div> 5 </ons-toolbar> 6 <p>TEST</p> 7 <div id="k_list"> 8 <ul> 9 <div id="ykzk"></div> 10 <div class="cls_cntk"><span id="ichirankst"></span> - <span id="ichiranked"></span> / <span id="ichirank"></span></div> 11 </ul> 12 </div> 13 <link rel="stylesheet" href="css/k_kanpo0.css"> 14 <link rel="stylesheet" href="css/k_kanpo1.css"> 15 <link rel="stylesheet" href="css/z_kanpo.css"> 16 <script src="js/a2.js"></script> 17</ons-page> 18 19
JAVASCRIPT
1#a2.js 2 3window.onload = function onLoad() { 4 lnkadr = location.href; 5 adrs = lnkadr.slice(lnkadr.length - 3) 6 getCSVFile_k2(); 7} 8 9function getCSVFile_k2() { 10 var xhr_k2 = new XMLHttpRequest(); 11 xhr_k2.onload = function() { 12 createArray_k2(xhr_k2.responseText); 13 }; 14 xhr_k2.open("get", "DT/DT_K.csv", true); 15 xhr_k2.send(null); 16} 17 18function createArray_k2(csvData) { 19 var csvArrayk2 = []; 20 var tempArrayk2 = csvData.split("\n"); 21 for(var i = 0; i<tempArrayk2.length;++i){ 22 csvArrayk2[i] = tempArrayk2[i].split(','); 23 }; 24 var kp = []; 25 var kpkxx = []; 26 var yk = ""; 27 var dt = ""; 28 var xxx2 = ""; 29 var kp2 = ""; 30 var kp1 = "<table>"; 31 kp1 = kp1 + "<tr>"; 32 kp1 = kp1 + "<td class='midashi' colspan='3'></td>"; 33 kp1 = kp1 + "<td class='kan' colspan='3'></td>"; 34 kp1 = kp1 + "</tr>"; 35 var kpkx = ""; 36 dt =0; 37 st_dt = 0; 38 ed_dt =0; 39 for (var i=1; i<tempArrayk2.length-1;++i){ 40 xxx2 = csvArrayk2[i][1].slice(0,3) 41 if(csvArrayk2[i][16]>0){ 42 dt += 1; 43 if (xxx2 == adrs && yaku == adrs) { 44 ed_dt = dt; 45 kpkx = kpkx + ("<tr>"); 46 kpkx = kpkx + ("<td class='td_ykzi' colspan='3'><span id = 'yk" + dt + "'>" + csvArrayk2[i][3] + "</span></td>"); 47 kpkx = kpkx + ("<td class='td_kzryo2'><span id = 'knzt" + dt + "'>" + csvArrayk2[i][16] + "</span></td>"); 48 kpkx = kpkx + ("<td class='td_kzryo'><span id = 'knz" + dt + "'>" + csvArrayk2[i][18] + "</span></td>"); 49 kpkx = kpkx + ("<td class='td_kzryo2'><span id = 'szaix" + dt + "'>" + csvArrayk2[i][21] + "</span></td>"); 50 kpkx = kpkx + ("</tr>"); 51 kpkx = kpkx + ("<tr>"); 52 kpkx = kpkx + ("<td class='td_sht'> <i>@ <span id='syo" + dt + "'>" + csvArrayk2[i][10] + "</span>"); 53 kpkx = kpkx + ("<span id='tanix" + dt + "'>" + csvArrayk2[i][20] + "</span></i></td>"); 54 kpkx = kpkx + ("<td class='td_sh'><span id= 'ryo" + dt + "'></span></td>"); 55 kpkx = kpkx + ("<td class='td_shryo'><span id= 'tani" + dt + "'>" + csvArrayk2[i][19] + "</span>"); 56 kpkx = kpkx + ("<input type='button' value=' －1 ' onclick=hiku('"+ dt +"')> "); 57 kpkx = kpkx + ("<input type='button' value=' ＋1 ' onclick=tasu('"+ dt +"')></td>"); 58 kpkx = kpkx + ("<td class='td_shx' colspan='3'><span id='sh" + dt + "'></span></td>"); 59 kpkx = kpkx + ("</tr>"); 60 } 61 else { yaku = csvArrayk2[i][1].slice(0,3); 62 if (xxx2 == adrs) { 63 kpkxx.push(kpkx); 64 document.getElementById("ykzik").innerHTML = kpkxx.join(''); 65 xxx = "'"+ csvArrayk2[i][1]+"'" 66 var kp2 = "<p><b>" + xxx.slice(4,-1) + "</b></p>" 67 kpkx = kp2 + kpkx; 68 kpkxx.push(kpkx); 69 document.getElementById("ykzik").innerHTML = kpkxx.join(''); 70 kpkx = ""; 71 st_dt = dt; 72 ed_dt =dt; 73 kpkx = kpkx + ("<tr>"); 74 kpkx = kpkx + ("<td class='td_ykzi' colspan='3'><span id = 'yk" + dt + "'>" + csvArrayk2[i][3] + "</span></td>"); 75 kpkx = kpkx + ("<td class='td_kzryo2'><span id = 'knzt" + dt + "'>" + csvArrayk2[i][16] + "</span></td>"); 76 kpkx = kpkx + ("<td class='td_kzryo'><span id = 'knz" + dt + "'>" + csvArrayk2[i][18] + "</span></td>"); 77 kpkx = kpkx + ("<td class='td_kzryo2'><span id = 'szaix" + dt + "'>" + csvArrayk2[i][21] + "</span></td>"); 78 kpkx = kpkx + ("</tr>"); 79 kpkx = kpkx + ("<tr>"); 80 kpkx = kpkx + ("<td class='td_sht'> <i>@ <span id='syo" + dt + "'>" + csvArrayk2[i][10] + "</span>"); 81 kpkx = kpkx + ("<span id='tanix" + dt + "'>" + csvArrayk2[i][20] + "</span></i></td>"); 82 kpkx = kpkx + ("<td class='td_sh'><span id= 'ryo" + dt + "'></span></td>"); 83 kpkx = kpkx + ("<td class='td_shryo'><span id= 'tani" + dt + "'>" + csvArrayk2[i][19] + "</span>"); 84 kpkx = kpkx + ("<input type='button' value=' －1 ' onclick=hiku('"+ dt +"')> "); 85 kpkx = kpkx + ("<input type='button' value=' ＋1 ' onclick=tasu('"+ dt +"')></td>"); 86 kpkx = kpkx + ("<td class='td_shx' colspan='3'><span id='sh" + dt + "'></span></td>"); 87 kpkx = kpkx + ("</tr>"); 88 } 89 } 90 } 91 } 92 kpkx = kp1 + kpkx; 93 kpkxx.push(kpkx); 94 document.getElementById("ykzk").innerHTML = kpkxx.join(''); 95 document.getElementById("ichirank").innerHTML = dt; 96 document.getElementById("ichirankst").innerHTML = st_dt; 97 document.getElementById("ichiranked").innerHTML = ed_dt; 98} 99
mts10806さま 質問の仕方が雑で申し訳ありません。タブ型メニューではないアプリを作ったのですが使い勝手がよくないので、タブメニュー化したいと考えています。現在作っているアプリのソースを編集してアップしてみたいと思いますのでお力になっていただければ幸いです
質問の内容が薄かったり提示情報が不足していると追記する前に回答がついていた場合、その回答が無駄になってしまいます。先に書いた通り質問の仕方で方向性が変わります。後から追記する情報のほうが多くなってしまうと回答者を振り回すことになって回答がつかなくなるのでご注意ください。
mts10806さま 申し訳ありませんでした。
「JavaScriptをうまく読み込めない状況」というのは具体的にどういう状況ですか？実行されない？エラーが起きる？うまく読み込めないことをどう確認したのですか？
spookybirdさま 読めこめないことを確認したのは、a1.jsのonloadしてすぐのところにconsole.logをつけて読み込めてるかどうかを確認いたしましたがconsoleに何も表示されませんでした。
a1.jsですか？a2.jsではなく？a1.htmlとして提示されているHTMLの中にはa2.jsの読み込みしかないようですが？
申し訳ありません。提示したJavascriptはa2.jsです。
a1.htmlをどうやって読み込ませているのかソースからわからないですが、ons-pageを画面にロードしてもwindow.onloadは動かないと思います。window.onloadの外側にconsole.logを仕込んだらどうなりますか？
window.onloadの外側にconsole.logを仕込んでみました。logは表示されませんでした。windows.onload→window.onpageshowにしても何もlogは出力されませんでした
回答4件
bwz61366さま
ご回答ありがとうございます。
今、できる範囲でのタブ型メニューのソースを追記してみました。
アドバイスいただけるとありがたいです。よろしくお願いいたします。
0
可能でしょうか?
質問文から見るに、おそらく可能である可能性が高い可能性がある。
ぐらいのことしか言えないです。
追記
こういう情報がありました。
[Onsen UI] ons-pageのイベントを活用してみよう。
Onsen UI 2.4.0からは、ons-template ではなく、 templateタグが推奨されています。
この template タグを使用した場合、ons-page 内に script タグを記述できるようになります。
投稿2018/08/25 11:51
編集2018/08/26 13:01総合スコア1803
0
monacaは未経験なのでコードからの想像でしかないのですが、そもそも読ませたいa1.htmlがどこからも呼ばれてないのでは？
ons-tabなりonc-templateなりで指定されるものではないのですか？
ちょっと外してそうな気がしますが…
どのようにa1.htmlが呼ばれてるのかわかりませんが、非同期でhtmLを差し替えてるだけだとしたら
ただscriptで読ませるだけじゃダメな気がします。
loadさせたりとかおそらく必要になるのでは。
投稿2018/08/26 05:43
編集2018/08/26 05:46総合スコア80850
0
mts10806さんの仰っていることが正しいです。
こちらにタブバーのサンプルがあるので確認してみてください。
https://ja.onsen.io/playground/?framework=vanilla&category=reference&module=tabbar
投稿2018/10/27 04:53
総合スコア121
あなたの回答
tips
プレビュー
