5

.jsファイルから.htmlファイルを開きたい。そこで、$。mobile.changePage（ "file.html"）を使用しました。file.htmlにはfile.jsがあります。ただし、file.htmlが呼び出されたときにfile.jsは呼び出されません。

前もって感謝します。

first.js

 $.mobile.changePage ("file.html");

file.html

<!DOCTYPE html> 
<html> 
 <head>
 <meta charset="utf-8" /> 
 <title>jQuery Mobile Framework - Dialog Example</title> 
 <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
 <script src="jquery-1.4.4.min.js"></script>
   <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="../Scripts/file.js"/> // Could not imported
    <script src="../Scripts/helperArrays.js"/> // Could not imported
    <script src="../Scripts/globalVariables.js"/> // Could not imported
</head> 
<body> 

<div data-role="page">

  <div data-role="header" data-nobackbtn="true">
   <h1>Vaults</h1>
  </div>

 <!-- <div data-role="content" data-theme="c" id="contentVault">

   <a href="Views/searchPage.html" data-role="button" data-theme="b">Sample Vault</a>       
   <a href="Views/searchPage.html" data-role="button" data-theme="c">My Vault</a>    
  </div> -->

        <div data-role="content" id="content">  
        <ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">            
          <li id="listdiv" data-role="list-divider">List of Items</li>
        </ul>    
      </div><!-- /content -->

 </div>


</body>
</html>

私を助けてください..

4

2 に答える 2

7

jQMがAJAXを介して別のページをロードすると、div [data-role = "page"]内のすべてのもののみが取り込まれ、ヘッドなどは他に何も取り込まれません。


したがって、必要に応じて、このdiv内にJS / CSSを含めることができます。問題は、このページに複数回アクセスするとCSSが蓄積されることですが、JSの場合はさらに問題が大きくなります。

基本的にすべてのページがDOMに追加されるため、$（'div.someClass'）などのグローバルセレクターを使用すると、IDを使用しても完全ではない場合でもJSはDOM全体（ロードしたすべてのページ）で実行されます同じページに2回リンクできる場合の解決策。


小規模なサイトの場合

すべてのCSSを1つのファイルに移動することでこれを解決し、ページが読み込まれるたびに実行するJSコードについては、pageinitイベントとpageshowjQMイベントにバインドします。

<script type="text/javascript">         
$("div:jqmData(role='page'):last").bind('pageinit', function(){
          //your code here - $.mobile.activePage not declared
    });

    $("div:jqmData(role='page'):last").bind('pageshow', function(){
          //your code here - $.mobile.activePage works now
    });
</script>

pageinitイベントは、ページが読み込まれたときに1回だけ実行されます（読み込まれた後、ページに戻るとメモリに残ります。戻るボタンを使用しても、これは再度起動されません）。一方、pageshowは、ページが表示されるたびに起動します。たとえば、ブラウザの[戻る]ボタンを使用して戻る場合でも、が表示されます。

pageinitは、DOMが存在する場合に実行されます。ページ表示イベントは、レンダリングされるDOMに依存するコードがあり、$。mobile.activePageを介してアクティブなページへのクイック参照が必要な場合、またはデータが変更された場合にのみ実行されます。表示されるたびにこれを更新してください。ほとんどの目的で、私はpageinitをjQMのdocument.readyとしてのみ使用し、そこでイベントをバインドします。静的要素にはbindを使用し、動的要素にはliveの代わりにonを使用します。これは、ライブイベントがドキュメントルートでリッスンするため、ページdivでリッスンする必要があるためです。



大規模なサイトの場合

大規模なサイトの場合、ライブイベントを任意のページにバインドし、ページの種類を処理することには利点があります。このようにして、jsコードが複数回読み込まれることはありません。

ヘルパー関数を含む外部jsファイルがあり、それをすべてのページの先頭に1回だけ配置する必要がある場合（あまり多くない場合）、非常に大きなサイトがある場合は、どのJSを追跡することで改善できる可能性があります。ファイルはサーバー側にロードされています。

これはすべて、AJAXを使用して新しいページをロードしないことで回避できるため、その遷移/ロード効果が価値があるかどうかを検討してください


*大規模なjQMサイトの処理方法は次のとおりです。*

  1. ライブイベントをすべてのページ/ダイアログのpageinitおよびpageshowイベントにバインドします。

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

  1. 各ページを次の名前で参照します。<div data-role="page" data-mypage="employeelist">

  2. このライブイベントでは、基本的に各ページの「名前」にswitchステートメントを設定し、event.typeでpageinit / pageshowまたはその両方を確認してコードを配置すると、ページが作成/表示されるたびにこのイベントが発生します。 、どのページがトリガーしたかを認識し、対応するコードを呼び出します

  3. 最終的にコードが多すぎたため、各ページのjsが個別のjsファイルに含まれ、ライブイベントにハンドラーを登録できるハンドラーオブジェクトを作成しました。

欠点は、サイト全体のすべてのjsがユーザーが最初にアクセスするページに読み込まれることですが、大規模なサイトでもjQueryやjQMよりも小さいため、これは問題になりません。利点は、ユーザーが新しいページに移動するたびに、AJAXを介して各ページのすべてのJSをロードする必要がなくなることです。

*注：RequireJSにより、これをさらに管理しやすくすることができます

于 2012-01-31T18:38:15.123 に答える
4

Jquery mobileはAJAXを介してページを取得し、そのコンテンツを現在のページに追加します。ページタイトルを着信タイトルに変更することについていくつかの通知を見たので、それらは（計画中ですか？）ヘッドにアクセスしていますが、現時点では、jquerymobileはページをロードするときに外部jsをロードしないようです。

さらに重要なことに、$（document）.ready（）を使用すると、AJAXであるため、トリガーされません。

于 2010-12-22T12:56:51.660 に答える