0

私のアプリケーションでは、コンテンツを表示するために html ページ以上を使用しており、各ページには独自の .js ファイルがあります。HTMLページを呼び出すと、.jsファイルも含まれます。.jsでは、を使用して$('div').live('pageshow',function(){})います。からhtmlファイルを呼び出しています。js(using $.mobile.changePage("htmlpage")).

私の問題: 2 つの html ファイルがあるとします。one.js 内で second.html ファイルが呼び出されます。second.html を表示すると、その時点で one.js が再度リロードされます。「one.js」、次に「second.js」というアラートが表示されます

one.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="Scripts/one.js"></script>
  </head> 
  <body>         
    <div data-role="page">
    </div>
  </body>
</html>

Second.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Sample </title> 
    <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
    <script src="../jquery-1.4.3.min.js"></script>
    <script src="../jquery.mobile-1.0a2.min.js"></script>
    <script type="text/javascript" src="Scripts/second.js"></script>
  </head> 
  <body>
    <div data-role="page">   
      <div data-role="button" id="link" >Second</div>
    </div><!-- /page -->
  </body>
</html>

one.js

$('div').live('pageshow',function()
{     
   alert("one.js");
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("second.html");                   
});

second.js

$('div').live('pageshow',function(){
{     
   alert('second.js');  
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("third.html");                   
});

注：その時点でforth.htmlを表示すると、次のファイルがリロードされます（one.js、second.js、third、js、およびfourth.js。ただし、fourth.jsだけが必要です）。$.document.ready(function(){}); を使用しようとしました。しかし、その時.jsは呼び出されませんでした。

4

2 に答える 2

1

pageshow イベントは、ページが読み込まれるたびに起動する JavaScript 関数をバインドします。2 番目のページを読み込むと、実際には作成する必要のない別の pageshow 関数が作成されます。

これを一度定義した場合にのみ、これは問題の解決に役立ちます。

 $('div').live('pageshow',function(event, ui){
    alert('This page was just hidden: '+ ui.prevPage);
 });

 $('div').live('pagehide',function(event, ui){
    alert('This page was just shown: '+ ui.nextPage);
 });

ページを切り替えると、どのページが表示され、どのページが非表示になったかが通知されます。

優れたリソース:
http://jquerymobile.com/demos/1.0a2/#docs/api/events.html

http://forum.jquery.com/topic/mobile-events-documentation

于 2011-01-10T04:47:50.700 に答える
1

oersコメントごとに編集（申し訳ありませんが、ここでは初心者です）：

現在の HTML ページに基づいて JS ファイルをロードする別の方法を次に示します。

アプリケーションのすべてのページに 1 つのスクリプト ファイルを含めますが、現在のページを検出して JavaScript ファイルを DOM に挿入する「ブートストラップ」ファイルとしてのみ機能します。

この関数は、Javascript を挿入します。

function insertScript(script, container) {
    var elem = document.createElement('script');
    elem.type = 'text/javascript';
    elem.src = 'Assets/Scripts/' + script + '.js';
    container.appendChild(elem);
}

そして、このコードは現在のページを検出します

// The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM 
// and all page transition animations have completed.
// See: https://gist.github.com/1336327 for some other page events
$(document).bind('pagechange', function(event){

// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
    var pages = $('div[data-role="page"]'),
    // the current page is always the last div in the Array, so we store it in a variable
    currentPage = pages[pages.length-1],
    // grab the url of the page the  was loaded from (e.g. what page have we just ajax'ed into view)
    attr = currentPage.getAttribute('data-url');

// basic conditional checks for the url we're expecting
if (attr.indexOf('home.html') !== -1) {
    // now we know what page we're on we can insert the required scripts.
    // In this case i'm inserting a 'script.js' file.
    // I do this by passing through the name of the file and the 'currentPage' variable
    insertScript('search', currentPage);
}

// rinse and repeat...
if (attr.indexOf('profile.html') !== -1) {
    insertScript('profile', currentPage);
}

});

参照リンク

于 2011-11-30T14:32:30.363 に答える