2017-04-18 22 views
0

Phonegapアプリケーションの特定のページに、外部のJavascriptファイルを追加します。アプリはUIのためにFramework7を使用します。PhonegapとFramework7は、特定のページの外部JavaScriptファイルを追加します。

例:
練習ページ2.1にはJavaScriptファイルexercise2_1.jsがあります。
練習ページ2.9にはJavaScriptファイルexercise2_9.jsがあります。
JavaScriptファイルをロードするのは、ユーザーがその特定のページにいるときだけです。

JavaScriptファイルは、インデックスページのヘッダーセクションに含まれていると機能します。私はすべての運動用JavaScriptファイルをロードしたくありません。私は使用されているものだけをロードしたい。すべてのjsファイルをロードせずにこれを行うことは可能ですか?

my-appセクションで、ファイルを外部jsファイルとしてロードしようとしました。しかし、それを働かせることはできませんでした。何も起こりません。

インデックスページ

<html> 

<title>My App</title> 
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css"> 
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css"> 
<link rel="stylesheet" href="css/styles.css"> 
<link rel="stylesheet" type="text/css" href="css/exercise.css" /> 

<div class="statusbar-overlay"></div> 
<div class="panel-overlay"></div> 
<div class="panel panel-left panel-reveal"> 
    <div class="list-block accordion-list"> 
     <ul> 
     <li class="accordion-item"><a href="#" class="item-content item-link"> 
      <div class="item-inner"> 
       <div class="item-title">2</div> 
      </div></a> 
      <div class="accordion-item-content"> 
       <div class="list-block"> 
        <ul> 
        <li class="item-content"> 
         <div class="item-inner"> 
         <a href="exercise2_1.html" class="close-panel" ><div class="item-title">Exercise 2</div></a> 
         </div> 
        </li> 
        </ul> 
       </div> 
      </div> 
     </li> 
     </ul> 
    </div> 
</div> 
<div class="views"> 
    <div class="view view-main"> 
     <!-- Top Navbar--> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
       <!-- We need cool sliding animation on title element, so we have additional "sliding" class --> 
       <div class="center sliding">Awesome App</div> 
       <div class="right"> 
        <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a> 
       </div> 
      </div> 
     </div> 
     <div class="pages navbar-through toolbar-through"> 
      <div data-page="index" class="page"> 
       <div class="page-content"> 
        <div class="content-block"> 
         <p>Page content goes here</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript" src="cordova.js"></script> 
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script> 
<script type="text/javascript" src="js/my-app.js"></script> 
<script type="text/javascript" src="js/nav.js"></script> 

my_app.jsページ

var myApp = new Framework7(); 
var $$ = Dom7; 
var mainView = myApp.addView('.view-main', { 
dynamicNavbar: true 
}); 

$$(document).on('deviceready', function() { 
console.log("Device is ready!"); 
}); 

myApp.onPageInit('exercise2_1', function (page) { 

}) 

$$(document).on('pageInit', function (e) { 
    var page = e.detail.page; 

if (page.name === 'exercise2_1') { 

} 
}); 

$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) { 
    myApp.alert('Test'); 
     function includeJs(jsFilePath) { 
     var js = document.createElement("script"); 
     js.type = "text/javascript"; 
     js.src = jsFilePath; 
     //document.body.appendChild(js); 
     document.getElementsByTagName("head")[0].appendChild(js); 
    } 
includeJs("js/exercise2_1.js"); 
}) 

行使2.1ページ(exercise2_1.html)

<div class="navbar"> 
<div class="navbar-inner"> 
    <div class="left"> 
     <a href="#" class="back link"> 
      <i class="icon icon-back"></i> 
      <span>Back</span> 
     </a> 
    </div> 
    <div class="center sliding">Exercise 2.1</div> 
    <div class="right"> 
     <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a> 
    </div> 
</div> 
</div> 
<div class="pages"> 
    <div data-page="exercise2_1" class="page">  
    <form id="Cloze" method="post" action="" onsubmit="return false;"> 
    <div class="ClozeBody"> 
    Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0"> 
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6"> 
</span> ingeniør. 
</div> 
</form> 
    <button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()">&nbsp;Check&nbsp;</button> 
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()">&nbsp;Hint&nbsp;</button> 
    <div class="Feedback" id="FeedbackDiv"> 
    <div class="FeedbackText" id="FeedbackContent"></div> 
    <button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;">&nbsp;OK&nbsp;</button> 
    </div> 
    </div> 
</div> 

答えて

0

I JQueryを組み込み、以下を実行してこれを完成させました:

$$(document).on('pageInit', function (e) { 
    var page = e.detail.page; 

    if (page.name == 'page1') { 
     $.getScript("js/page1.js"); 
    } else if (page.name == 'page2') { 
     $.getScript("js/page2.js"); 
    } 
}); 
0

この問題が見つかりました。これは、インデックスページのonloadイベントと関係していました。 インデックスページからonloadイベントを削除し、演習ページに入れました。

これが私の問題を解決しました。

<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe> 

これは他の人に役立つことを期待しています。

関連する問題