Phonegap和Framework7，为特定页面添加外部JavaScript文件

我想为我的Phonegap应用中的特定页面添加外部Javascript文件。该应用程序使用UI的Framework7。Phonegap和Framework7，为特定页面添加外部JavaScript文件

例如：
练习页2.1有JavaScript文件exercise2_1.js。
练习页2.9有JavaScript文件exercise2_9.js等。
我只想加载JavaScript文件，当用户在特定的页面上。

当JavaScript文件包含在索引页面的标题部分中时，JavaScript文件可以正常工作。我不想加载所有练习JavaScript文件。我只想加载正在使用的人。有没有可能做到这一点，而无需加载所有的js文件？

在我的应用程序部分，我试图加载文件作为外部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>

来源

2017-04-18 Charm Geld

我一个通过包含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"); 
    } 
});

来源

2017-04-18 20:26:32 firestream

我发现了这个问题。它必须处理索引页上的onload事件。我从索引页面中删除了onload事件并将其放入练习页面。

这解决了我的问题。

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

希望这可以帮助别人。

来源

2017-04-20 07:59:08

Phonegap和Framework7，为特定页面添加外部JavaScript文件

回答

相关问题