Javascript nur zum ersten Mal geladen oder bei Aktualisierung

-2

Ich baue eine Cross-Plattform-App mit Cordova und jQuery Mobile 1.4.5, ich habe eine einfache html Seite, die eine javascript Datei laden sollte.Javascript nur zum ersten Mal geladen oder bei Aktualisierung

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
     <meta name="format-detection" content="telephone=no"> 
     <meta name="msapplication-tap-highlight" content="no"> 

     <!-- Include jQUERY ---> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="jquery/jquery.mobile-1.4.5.css"> 
     <link rel="stylesheet" href="css/custom-icons.css"> 
     <script src="jquery/jquery.js"></script> 
     <script src="jquery/jquery.mobile-1.4.5.js"></script> 

     <title>myPage</title> 
    </head> 
    <body> 
     <!-- jQUERY HEADER is a navigation bar with multiple options --> 
     <div data-role="header"> 
      <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
      <h1>my app</h1> 
      <div data-role="navbar"> 
       <ul id="nav-bar"> 
        <li><a href="a.html" data-page="a">a</a></li> 
        <li><a href="b.html" data-page="b">b</a></li> 
        <li><a href="c.html" data-page="c">c</a></li> 
       </ul> 
      </div> 
     </div> 

     <div role="main" class="ui-content"> 
      <center><h3><i>A title</i></h3> 

      <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> 
       <legend>my legend</legend> 
       <input type="checkbox" data-role="flipswitch" name="flip1" id="flip1"> 
       <input type="checkbox" data-role="flipswitch" name="flip2" id="flip2"> 
       <input type="checkbox" data-role="flipswitch" name="flip3" id="flip3"> 
       <input type="checkbox" data-role="flipswitch" name="flip4" id="flip4"> 
      </fieldset> 
      </center> 
     </div> 

     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="js/home.js"></script> 
    </body> 
</html>

jedoch die home.js Datei geladen werden nur das erste Mal (oder auf Refresh), aber wenn ich zum Beispiel bin auf b.html und ich navigieren Sie zu der oben genannten Seite (index.html), dann wird home.js nicht ausgeführt.

Die Heimat home.js Datei enthält einfach console.log("executed");, die gedruckt wird, wenn cordova die index.html-Datei lädt, aber nicht, wenn ich auf diese Seite über die Navigationsleiste später manuell navigieren.

EDIT: Beachten Sie, dass andere Seiten zeigen dieses Verhalten nicht. Zum Beispiel die folgende Seite lädt immer die Javascript-Datei.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
     <meta name="format-detection" content="telephone=no"> 
     <meta name="msapplication-tap-highlight" content="no"> 
     <!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
     <link rel="stylesheet" type="text/css" href="css/index.css"> --> 

     <!-- Include jQUERY ---> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="jquery/jquery.mobile-1.4.5.css"> 
     <link rel="stylesheet" href="css/custom-icons.css"> 
     <script src="jquery/jquery.js"></script> 
     <script src="jquery/jquery.mobile-1.4.5.js"></script> 

     <title>bla bla</title> 
    </head> 
    <body> 
     <!-- jQUERY HEADER is a navigation bar with multiple options --> 
     <div data-role="header"> 
      <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
      <h1>smartHub</h1> 
      <div data-role="navbar"> 
       <ul id="nav-bar"> 
        <li><a href="a.html" data-page="a">a</a></li> 
        <li><a href="b.html" data-page="b">b</a></li> 
        <li><a href="c.html" data-page="c">c</a></li> 
       </ul> 
      </div> 
     </div> 

     <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> 
      <h1>...</h1> 
      <ul data-role="listview" data-inset="false"> 
       ... 
      </ul> 
     </div> 

     <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> 
      <h1>...</h1> 
      <ul data-role="listview" data-inset="false"> 
       ... 
      </ul> 
     </div> 

     <script type="text/javascript" src="js/someOtherFile.js"></script> 
    </body> 
</html>

EDIT: Ich "fixed" das Problem, indem Sie den Link zu der Homepage in der Kopfzeile dieses <a href="#" id="homeButton" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> ändern und dann ein auf Click-Handler für die Home-Taste wie folgt setzen:

$("#homeButton").on("click", function() { 
    window.location.replace("index.html"); 
});

Dies entspricht dem Durchsuchen der Seite. Ich halte dies jedoch nicht für eine angemessene Lösung. Es wäre schön, wenn jemand darauf hinweisen könnte, warum meine Homepage dieses Verhalten zeigt.

Darüber hinaus ist dies eigentlich keine Lösung überhaupt, da es scheint, dass Dinge, die ich in localStorage gesetzt habe verloren gehen, wenn zu index.html Umleitung ...

EDIT: ich das Problem so einfach wie möglich wiedergegeben . Die Wiedergabe enthält zwei HTML-Dateien, die here gefunden werden kann. Beim Surfen auf index.html es On index.html druckt, dann können wir die Navigationsleiste verwenden, um a.html zu gehen, die On page a.html gedruckt wird. Wenn wir dann wieder in den Index gehen durch die Home-Taste klicken, wird es nicht drucken On index.html mehr (daher das Skript nicht ausgeführt wird), während, wenn wir a.html wieder navigieren, wird es On page a.html drucken (daher, dass Skript ausgeführt wird jedes Mal, wir navigieren zur Seite, während das Skript auf der Indexseite nicht funktioniert).

Quelle

2016-10-02 HyperZ

Enthält 'b.html' den gleichen HTML? – fzzle

@fzzle 'b.html' enthält den gleichen Header, hat aber natürlich einen anderen Text und enthält eine andere Javascript-Datei. – HyperZ

Könnte der Down Voter zumindest konstruktiv sein? Was ist der Grund dafür? – HyperZ

Mit jQuery Mobile index.html wird ein Container für alle Seiten in Ihrer Anwendung. Also, wenn der Benutzer navigiert zu a.html, wird ihr Inhalt in das DOM injiziert bereits für index.html erstellt. Skript in index.html bleibt aktiv. index.html Inhalt bleibt im DOM, ist aber versteckt.Wenn der Benutzer zurück zu index.html navigiert, wird der Inhalt von index.html einfach wieder sichtbar. Der Inhalt von a.html wird aus dem DOM entfernt.

Wenn der Benutzer dann erneut zu a.html navigiert, wird sein Inhalt erneut in das DOM injiziert, wobei erneut ein Skript ausgeführt wird.

Nehmen Sie diese Seiten und sehen Sie sich die Konsole an.

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- Include jQUERY --> 
     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
     <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

     <title>Index page</title> 
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-role="header"> 
       <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
       <h1>My app title</h1> 
       <div data-role="navbar"> 
        <ul id="nav-bar"> 
         <li><a href="a.html" data-page="a">a</a></li> 
         <li><a href="#" data-page="b">b</a></li> 
         <li><a href="#" data-page="c">c</a></li> 
        </ul> 
       </div> 
      </div> 

      <div role="main" class="ui-content"> 
       <h3><i>Some title</i></h3> 
      </div> 

      <script> 
       console.log("On index.html"); 
      </script> 
     </div> 
     <script> 
      $(document).on('pageshow', function() { 
       // catch the ID of the active page 
       var curID = $('.ui-page-active').attr('id'); 
       console.log("curID: " + curID); 
       switch (curID) { 
        // code here 
        default: break; 
       } 
      }); 
     </script> 
    </body> 
</html>

a.html:

<html> 
    <head> 
     <!-- Note: no need to re-include the jQM-files. They're already around. --> 
     <title>Other page page</title> 
    </head> 
    <body> 
     <div data-role="page" id="pageA"> 
      <div data-role="header"> 
       <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
       <h1>My app title</h1> 
       <div data-role="navbar"> 
        <ul id="nav-bar"> 
         <li><a href="a.html" data-page="a">a</a></li> 
         <li><a href="#" data-page="b">b</a></li> 
         <li><a href="#" data-page="c">c</a></li> 
        </ul> 
       </div> 
      </div> 

      <div role="main" class="ui-content"> 
       <p>Page a</p> 
      </div> 
      <script> 
       console.log("On page a.html"); 
      </script> 
     </div> 
    </body> 
</html>

Bitte beachte, dass ich DIVs mit data-role="page" und mit eindeutigen IDs in beiden Dateien hinzugefügt haben.

Der pageshow Event-Handler ist der Schlüssel. Es wird jedes Mal ausgelöst, wenn jQM eine 'Seite' anzeigt. (Es kann mehrere Elemente in index.html mit data-role="page" geben, die alle als "Seiten" behandelt werden).

Quelle

2016-10-04 09:43:42 RonaldPK

Danke, ich habe es gerade herausgefunden, als ich vor einer Stunde mit einem College gesprochen habe. Danke für Ihre Hilfe! – HyperZ

Dies ist ein Caching-Problem, können Sie die Versionierung für Ihre JS-Datei verwenden:

Beispiel:

<script type="text/javascript" src="js/home.js?version=1.0.0.5"></script>

Quelle

2016-10-02 22:38:04

Könnten Sie ein bisschen expliziter sein? Ich bin nicht in Web-Entwicklung. Was wird das genau tun? Muss ich immer eine neue zufällige Versionsnummer senden, wenn ich nicht möchte, dass die Datei zwischengespeichert wird? – HyperZ

Wenn Sie die Datei entwickeln und aktiv bearbeiten, können Sie die Versionierung (wenn Zwischenspeichern) aktivieren oder das Zwischenspeichern über .htaccess deaktivieren. Ich hoffe, ich habe deine Frage richtig beantwortet. Wenn nicht, bitte korrigieren Sie mich –

Da diese Seiten noch wirklich grundlegend sind, kann ich es im Browser testen. Ich verwende Safari und deaktiviertes Caching, um zu testen, ob es sich um ein Caching-Problem handelt. Das Problem besteht jedoch weiterhin und ich verstehe wirklich nicht warum. Andere Seiten haben dieses Problem nicht, ich bin gestolpert, warum. – HyperZ

Leider kann ich nicht jetzt sagen. Ich versuche, die versuchen zu schlagen Sie Ihre JS in Ihrem index.html oder index. blah blah blah benötigt zu setzen. Oder legt es in dem geladen view/page

Prost

Quelle

2016-10-03 03:35:30

Ich halte Inline-Skripts für eine schlechte Methode, besonders für große Dateien. In meinem Fall ist der Javascript-Code ungefähr 200 loc, was schrecklich wäre, wenn es in die html-Datei eingefügt würde. – HyperZ

Javascript nur zum ersten Mal geladen oder bei Aktualisierung

Antwort

Verwandte Themen