Phonegap と JQuery Mobile の両方を使用するアプリを開発しています。アプリは外部サーバーに接続して、新しいコンテンツ/コンテンツの更新 (html および pdf ファイル) を確認します。必要に応じて、iOS ではこれらのファイルがアプリの /Documents フォルダーに正常にダウンロードされます。次に、アプリは各コンテンツ ファイルの絶対パス ( file://localhost/var/mobile/Applications/APPID/Documents/subfolder ) を取得し、各ファイルの絶対パスにリンクするリストビューを作成します。
私が抱えている問題は次のとおりです。リストビューをタップすると、リンクされたページが開きますが、ajax 呼び出しとしてではありません。ページは読み込まれますが、ページで javascript (cordova.js、jquery.js、app.js など) が参照されていないため、メイン メニューに戻ることができません。/Documents フォルダー内の html ファイルを開くと、jQueryMobile ajax ナビゲーションが機能しなくなったようです。これは、/Documents フォルダー内 (したがって、Phonegap の www フォルダー外) にダウンロードされたコンテンツに対してのみ発生します。
リモート デバッガーから関数を呼び出そうとすると$.mobile.changePage('previousPage.html')*、ページが jQuery を参照できないかのように、コンソールは $ が定義されていないことを返します。しかし、/www フォルダー内のどのページでも、js ファイルを再参照する必要はありません。
<div data-role="page" id="pageid">アプリはマルチページ レイアウトを使用し、各ページにはコンテナーの後に独自の JavaScript があります。/Documents フォルダー内の各 .html は、jQueryMobile ページ (data-role 属性付き) として構造化されています。
リストビューを作成するコードは次のとおりです。
<script type="text/javascript">
$('#content').live('pagebeforeshow', function(e) {
var curCat = parseInt(window.localStorage.getItem('currentCat'));
console.log('PAGE BEFORE SHOW: CONTENT');
db.db.transaction(function(tx) {
tx.executeSql('SELECT * FROM `content` WHERE `content`.`catID` = ?', [curCat],
function(tx, result) {
var path = window.localStorage.getItem('contentPath') + '/';
if (result.rows && result.rows.length) {
var html = '<ul data-role="listview" id="linkUl">';
for (var i = 0; i < result.rows.length; i++) {
var filename = result.rows.item(i).index_file.substr(result.rows.item(i).index_file.lastIndexOf('/'));
console.log(result.rows.item(i).id);
html += '<li id="' + result.rows.item(i).id + '">';
html += '<a href="' + path + filename +'">';
html += result.rows.item(i).title;
html += '</a></li>';
}
html += '</ul>';
console.log(html);
$('#contCnt').html(html);
$('ul#linkUl').listview();
}
},
function(tx, error) {
console.log(error.code);
var html = '<div id="errorDB">';
html += 'ERROR RETRIEVING FILES';
html += '</div>';
$('#contCnt').html(html);
}
);
});
});
$('div#content').live('pageshow', function(e) {
$('ul#linkUl').listview('refresh');
});
</script>
ここで、ContentPath 変数は fileSystem オブジェクトの directory.toUrl(); として格納されます。
jQueryMobile が外部ディレクトリ (iOS の /Documents フォルダー) から html を ajax-pull できないか、そうするためにいくつかの属性または設定が欠落しているのではないかと心配しています。おそらく絶対URLを使用しているからでしょうか? もしそうなら、Phonegap の /www フォルダから相対 URL を取得するにはどうすればよいですか? cordova.plist ファイルで何かを宣言する必要がありますか?
また、ダウンロードしたコンテンツに js を含める必要はなく、プレーンな html のみにする必要がありますが、jQuery Mobile のヘッダー/フッターとナビゲーション システムをすべてのページに保持する必要があります。
Cordova 2.2.0 と、jQuery と jQuery モバイルの両方の最新リリースを使用しています。
事前に感謝し、フォーマットに問題がある場合は申し訳ありません。私はSOを初めて使用します（できるだけ早く編集する場合）。