Question

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

例：
练习页面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>

Answer 1

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

Answer 2

我发现了问题。它与索引页面上的onload事件有关。我从索引页面中删除了onload事件并将其放在练习页面中。

这解决了我的问题。

txtName.Attributes.Add("onkeyup", "ShowLength("+ param +");");

希望这有助于其他人。

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

2 个答案: