jQuery モバイルページスクリプトを「index.html」に含める必要があるのはなぜですか?-jsチュートリアル-php.cn

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

Patricia Arquette

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

オリジナル

520 人が閲覧しました

Why Do jQuery Mobile Page Scripts Need to Be Included in `index.html`?

jQuery Mobile を使用する場合、Index.html にスクリプトを含める必要がある理由

はじめに

jQuery Mobile プロジェクトでは、$.mobile.changepage() を使用してページをリダイレクトすると混乱が生じます。開発者は、すべてのページスクリプトを同じファイル、index.html に含める必要があります。そうしないと、リダイレクトページはヘッダーで定義された関数を実行できません。この記事では、この現象の背後にある動作について説明します。

jQuery Mobile によるページ変更の処理方法

jQuery Mobile は、Ajax を使用して後続のページを読み込みます。最初のページは通常どおりロードされますが、後続のページは本文のコンテンツのみをロードします。具体的には、data-role="page" 属性を持つ最初の div のみが DOM に組み込まれ、それ以外は破棄されます。

スクリプトが動作しない理由

2 ページ目以降のページでは、HTML が正常にレンダリングされるため、ボタンが表示されます。ただし、ページ遷移中に親ヘッドが無視されたため、クリックイベントは機能しません。

解決策 1: スクリプトを本文コンテンツに移動する

簡単な解決策は、移動することです。 script タグを後続のページの本文コンテンツに追加します:

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

ログイン後にコピー

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

推奨される解決策は、すべての JavaScript を Index.html に移動することです。最初の HTML ファイルの先頭に配置される単一ファイル、index.js:

<head>
    <meta ...>
    <link rel="stylesheet" ...>
    <script src="jquery.mobile-1.2.0.min.js"></script>
    <script src="index.js"></script> // Your consolidated JavaScript
</head>

ログイン後にコピー

Index.html 統合の理由

Phonegap (jQuery Mobile など) 、バグが発生する可能性があります。すべての JavaScript が 1 つの HTML ファイルに配置されている場合、エラーが発生して現在のページが更新される可能性があります。そのページに必要な JavaScript が欠けている場合、再起動するまで機能しなくなります。

現実的な解決策

index.js ファイルを他のすべての HTML ファイルの先頭に移動します。。これにより、他の DOM 要素がバグにより失われた場合でも、スクリプトにアクセスできるようになります。

結論

jQuery Mobile がページ変更をどのように処理するかを理解することは、アプリ開発を成功させるために重要です。スクリプトをindex.htmlに統合することは、スクリプトの可用性を確保し、Phonegapの潜在的な問題を防ぐために推奨されるソリューションです。

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