jQuery Mobile の AJAX ベースのページ遷移で JavaScript スクリプトが正しく実行されることを確認するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-11-11 01:24:02

オリジナル

592 人が閲覧しました

How can I ensure my JavaScript scripts execute correctly in jQuery Mobile's AJAX-based page transitions?

jQuery Mobile でスクリプトを配置する場所

jQuery Mobile ページの変更について

jQuery Mobile は AJAX を使用してページを読み込みます。最初のページは従来どおりにロードされ、HEAD コンテンツと BODY コンテンツの両方が DOM に挿入されます。ただし、後続のページの読み込みでは、BODY コンテンツ、具体的には data-role="page" を持つ最初の DIV のみが抽出されます。追加のスクリプトを含め、BODY に残っているコンテンツはすべて破棄されます。

スクリプト実行への影響

このメカニズムは、ボタンが表示される場合でも、そのクリックイベントが実行に失敗する理由を説明します。。クリックイベントコードは、2 番目のページの破棄された HEAD コンテンツに存在していました。

解決策 1: スクリプトを BODY に移動する

解決策の 1 つは、次の内容を含む SCRIPT タグを移動することです。後続の各ページの BODY コンテンツに JavaScript コードを追加します:

<body>
    <div data-role="page">
        // Rest of HTML content
        <script>
            // JavaScript code
        </script>
    </div>
</body>

ログイン後にコピー

このソリューションは

解決策 2: Index.html のスクリプトを一元化する

より組織化されたアプローチには、すべての JavaScript を 1 つのファイルに統合することが含まれます (例: index.js) を作成し、jQuery Mobile がそれを最初のページの HEAD にロードします。ロード済み:

<head>
    <script src="index.js"></script> // Include your JavaScript file
</head>

ログイン後にコピー

このアプローチは次の理由で優れています:

JavaScript が単一のファイルに整理されます。
DOM コンテンツの損失によって引き起こされる JavaScript エラーを防ぎます。 Phonegap ページの更新中。

解決策 3: を使用するrel="external"

ページ変更要素で rel="external" を使用すると、AJAX の読み込みが無効になり、従来の Web アプリケーションの動作が強制されます。ただし、これは Phonegap アプリケーションには理想的ではありません。

実際的な解決策

最も現実的な解決策は、解決策 2 を採用することですが、少し工夫が必要です。後続の各ページの HEAD に集中スクリプトを配置し、必要な JavaScript コードがすべてページ遷移後に利用できるようにして、Phonegap のバグのある動作によって引き起こされる潜在的な問題を軽減します。

最終的な考察

jQuery Mobile のページ処理メカニズムを理解することは、適切なアプリケーションを構築するために重要です。これらの解決策に従うことで、スクリプトが正しく実行され、適切に編成され保守しやすいコードベースを維持できるようになります。

以上がjQuery Mobile の AJAX ベースのページ遷移で JavaScript スクリプトが正しく実行されることを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。