jQuery モバイル プロジェクトのindex.html に JavaScript スクリプトを含める必要があるのはなぜですか?

スクリプトを jQuery Mobile のindex.html に置く必要がある理由

jQuery Mobile プロジェクトでは、$.mobile.changepage を使用してページ間をリダイレクトするときに混乱が発生する可能性があります。予期せず、リダイレクトされたページのスクリプトが実行に失敗し、何も分からなくなります。

jQuery Mobile のページ処理を理解する

この状況を理解するには、jQuery Mobile のページ処理メカニズムを理解することが重要です。 AJAX を利用して後続のページを読み込みます。最初のページは通常どおりにロードされますが、後続のページは BODY コンテンツ (具体的には、data-role="page" 属性を持つ最初の DIV) のみを受け取り、HEAD コンテンツは無視されます。

これは、スクリプトがリダイレクトされたページの BODY コンテンツに定義されているものは実行されません。その理由は、必要なライブラリを含む親 HEAD がページ遷移中に読み込まれないためです。

解決策 1: 本文にスクリプトを含める

この問題を解決するには、SCRIPT タグを移動しますBODY コンテンツにリダイレクトされたページの場合:

    <div data-role="page">
        // Other HTML content
        <script>
            // Javascript code
        </script>
    </div>

このソリューションは機能しますが、複数の要素で HTML が乱雑になる可能性があります。 SCRIPT タグ。

解決策 2: スクリプトをindex.html に統合する

より良いアプローチは、すべての JavaScript ロジックを HEAD の別の JS ファイルに含めることで、index.html に集中化することです。

    <meta name="viewport" ...>
    <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css">
    <script src="jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Custom JS file

index.html が最も重要な理由

解決策 2スクリプトを統合する場合でも、index.html にスクリプトを含めることが重要であることに変わりはありません。これは主に、Phonegap のバグの多い性質によるものです。エラーが発生した場合、Phonegap は現在のページを更新し、DOM を失う可能性があります。更新されたページの HEAD に存在しない JavaScript コードは実行されません。

index.html にスクリプトを一元化することで、必要なライブラリが常に HEAD に読み込まれ、潜在的な Phonegap エラーの後でも機能が中断されないようにします。 .

以上がjQuery モバイル プロジェクトのindex.html に JavaScript スクリプトを含める必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。