1

jquery mobile で ajax を使用してページを切り替えると、本体内の DOM のみが取得されdata-role="page"ます。問題は、これがモバイル デバイスで実行されている phonegap アプリであるため、ajax を使用せずにページ全体を読み込むと、すべての JS、CSS スクリプトの取得が非常に遅くなることです。

いろいろと調べてみました。ドキュメントには、javascript を dom に追加してdata-role="page"要素の下に配置できると書かれていますが、この方法で起動することはまだできません。

私が現在試みているのは、最初のページの上部に含まれるブートストラップスクリプトを持ち、pagechange でそのページに固有の js を dom に挿入しようとすることです

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

//get the path to the html asset
var path = document.location.pathname;

//split up
var arr = path.split('/');

//get the relevant part of the path ie index.html
var page = arr[arr.length-1];

// 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];

//if the page is index add index.js to the last dom node
if (page == 'index.html') {
    insertScript('index', currentPage);
}

});

次に、たとえばindex.jsには次のものがあります

$("#start_page").live('pageinit', function() {
    alert('on start page');       
});

しかし、pageinit 関数は起動しません。何か案は

**編集：

たとえば、index.htmlとhome.htmlを使用して、複数のhtmlページがあります

*index.html

<html>
<head>
<script type="text/javascript" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$("#index_page").live('pageinit', function() {

//do some page specific js functions for index.html
});

</head>
<body>
<div data-role="page" id="index_page">
<a href='home.html'>go to home page</a>
</div>
</body>
</html>

**home.html

<html>
<head>
<script type="text/javascript">
$("#home_page").live('pageinit', function() {

   //this is the JS I want to pull
});

</head>
<body>
<div data-role="page" id="home_page">
<h1>this is the home page</h1>
</div>
</body>
</html>

インデックスからホームへのリンクをクリックするとどうなりますか DOM は更新されますが、home.html ページの JS は AJAX 経由でページに挿入されないため、その方法を見つけようとしています。

すべてのjsを1つのページに含めることができることはわかっていますが、多くのページがあり、すぐに乱雑になるため、それを避けようとしています。

4

3 に答える 3

1

jQuery Mobile が AJAX を介して別のページをロードすると<div data-role="page">、新しいページの を既存のページの に挿入するだけであることに注意してください<body>。存在しないのと同じように外にあるものは何でもdiv。そのため、2 ページ目をプルしたときに、挿入したいスクリプトが実際にはそこにありません。

それを行う方法は、スクリプトをページ div 内に含めるか、すべての JavaScript を HEAD にロードすることです。このちょっとした知恵にも注意を払う必要があります

http://code.jquery.com/mobile/latest/demos/docs/api/events.html

「これらのハンドラーが最初のページの読み込み中に呼び出されるようにするには、jQuery Mobile が実行される前にそれらをバインドする必要があります。これは、グローバル構成ページで説明されているように、mobileinit ハンドラーで行うことができます。」

ああ、もう 1 つ覚えておくべきことがあります... 既に読み込まれているページに JavaScript をコピーしても、実際には実行されません ;)

于 2012-01-21T02:26:06.990 に答える
0

私はまだ問題に遭遇しました。最後に、iframeタグを使用してdata-role="page"ページ div に追加します。

ちょうどこのような：

<iframe style="display:none" onload="javascript:js_fun()"></iframe>

それからjs_fun()走ります。したがって、ajax によって js コードまたはファイルをロードできます。

于 2013-06-10T04:42:13.157 に答える
0

何を達成しようとしているのか正確にはわかりませんが、JavaScript を使用してページ上の各リンクをループし、onclick を false に設定して、href を ajax 呼び出しに転送することができます。PHP ページは、要求されたページの URL を受け取り、xml を解析して、本文の内容を返します。これにより、最初のページの本文を置き換えることができます。

于 2012-01-21T00:15:06.950 に答える