2016-10-02 9 views
-2

私はCordovaとjQuery Mobile 1.4.5でクロスプラットフォームアプリケーションを構築していますが、ページにはファイルをロードする必要があります。Javascriptは初回読み込み時または更新時にのみ読み込まれます

<!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> 

しかし、home.jsファイルが初めて(またはリフレッシュ時)にのみロードされますが、私はb.htmlに例えばと私は上記のページ(index.html)に移動した場合、その後home.jsは実行されません。

home.jsファイルは単に私が後で手動でナビゲーションバーを通じて、そのページに移動したときにコルドバがindex.htmlファイルをロードするときに印刷されないが、console.log("executed");が含まれています。

EDIT:この動作は他のページには表示されないことに注意してください。 たとえば、以下のページは常にjavascriptファイルをロードします。

<!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:

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

:私はこの<a href="#" id="homeButton" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>にヘッダにホームページへのリンクを変更し、このようなホームボタンのクリックハンドラに置くことによって、問題を「固定」これは、実際にページを参照するのと同じです。しかし、私はこれが適切な解決策ではないと考えています。誰かが私のホームページにこのような現象が現れる理由を指摘できればいいです。

index.htmlにリダイレクトするとき、私はlocalStorageに入れたアイテムが失われているようですので、これは実際にEDIT

...全く

ソリューションではありません。私は、できるだけ簡単に問題を再現。 再生には、 hereという2つのhtmlファイルが含まれています。 index.htmlにブラウズすると、 On index.htmlが表示され、 a.htmlに移動すると、 On page a.htmlと表示されます。 a.htmlに再度移動すると、 On page a.htmlが表示されます(したがって、そのスクリプトは毎回実行されます)。ホームボタンをクリックして再びインデックスに移動すると、 On index.htmlはもう印刷されません(したがって、スクリプトは実行されません)。インデックスページのスクリプトは表示されませんが、ページに移動します)。

+0

'b.html'には同じHTMLが含まれていますか? – fzzle

+0

@fzzle 'b.html'には同じヘッダーが含まれていますが、もちろん別の本体があり、別のjavascriptファイルが含まれています。 – HyperZ

+0

ダウン有権者は、少なくとも建設的なことはできますか?これの理由は何ですか? – HyperZ

答えて

1

の内側にそれを置くことはあなたのアプリ内のすべてのページのコンテナになります。したがって、ユーザがa.htmlにナビゲートすると、そのコンテンツはすでにindex.htmlのために作成されたDOMに注入されます。 index.htmlのスクリプトは有効なままです。 index.htmlコンテンツはDOM内に残りますが、非表示になります。ユーザーがindex.htmlにナビゲートすると、index.htmlの内容が再び表示されます。 a.htmlの内容はDOMから削除されます。

ユーザがa.htmlに再びナビゲートすると、その内容は再びDOMに注入され、DOM内にスクリプトが再度実行されます。

これらのページを参照して、コンソールを見てください。

の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:私はdata-role="page"とし、両方のファイル内で一意のIDをdiv要素を追加しました

<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> 

注意。

pageshowイベントハンドラが重要です。これは、jQMが「ページ」を表示するたびにトリガーされます。 (index.htmlには複数の要素があり、それぞれdata-role="page"となります。これらはすべて「ページ」として扱われます)。

+0

ありがとう、1時間ほど前に大学と話しているうちに、それを理解しました。ご協力いただきありがとうございます! – HyperZ

0

これは、キャッシングの問題であり、あなたがあなたのJSファイルのバージョン管理を使用することができます。

例:

<script type="text/javascript" src="js/home.js?version=1.0.0.5"></script> 
申し訳
+0

あなたはもう少し明示的になりますか?私はウェブ開発ではない。これはどういうことでしょうか?ファイルをキャッシュしたくない場合は、常に新しいランダムバージョン番号を送信する必要がありますか? – HyperZ

+0

ファイルを開発し、積極的に編集している場合は、バージョニング(キャッシュしている場合)や、.htaccessによるキャッシュを無効にすることができます。私はあなたの質問を正しく得たことを願っています。しない場合は私を修正してください –

+0

これらのページはまだ本当に基本的なので、私はブラウザでそれをテストすることができます。キャッシュの問題であるかどうかをテストするために、私はサファリと非アクティブ化キャッシュを使用しています。しかし、問題は解決せず、なぜ私は本当に理解できません。他のページにはこの問題はありません。理由は何ですか? – HyperZ

0

に私は今のところコメントすることはできません。私はあなたのまたはindex. blah blah blahにあなたの必要性を入れようとしています。またはjQueryのモバイルindex.htmlでロードview/page

乾杯

+0

私はインラインスクリプトを悪い習慣と考えています。特に大きなファイルの場合は特にそうです。私の場合、javascriptコードは約200 locです.HTMLファイルにインラインで置くとひどいでしょう。 – HyperZ

関連する問題