2 つの異なるドメインからロードする JQuery Mobile アプリケーションを開発しています。(一部のページは example1.com から、他のページは example2.com からのものですが、すべてのページは JQuery で設計されています)
私の知る限り、example1.com から example2.com へのリンクがある場合、ページが完全にリロードされます。
内部リンクと同じように、そのページの動的 ajax 読み込みを行う方法はありませんか?
2 つの異なるドメインからロードする JQuery Mobile アプリケーションを開発しています。(一部のページは example1.com から、他のページは example2.com からのものですが、すべてのページは JQuery で設計されています)
私の知る限り、example1.com から example2.com へのリンクがある場合、ページが完全にリロードされます。
内部リンクと同じように、そのページの動的 ajax 読み込みを行う方法はありませんか?
jQuery Mobileのドキュメントによると、ページが別のドメインにある場合は、ページ全体が更新されてページが読み込まれます。
自分でテストしたことはありませんが、最初に$.mobile.loadPage
メソッドを使用してページをロードしてから、同じDOMの一部となるそのページにリンクまたは変更できるはずです。
下記参照:
外部ページへのリンク
jQuery Mobile は、Ajax を利用したサイトとアプリケーションを構築するプロセスを自動化します。
デフォルトでは、外部ページ (例: products.html) を指すリンクをクリックすると、フレームワークはリンクの href を解析して Ajax リクエスト (Hijax) を作成し、読み込みスピナーを表示します。
Ajax リクエストが成功すると、新しいページ コンテンツが DOM に追加され、すべてのモバイル ウィジェットが自動初期化され、新しいページがアニメーション化されてページ遷移が表示されます。
Ajax リクエストが失敗した場合、フレームワークは小さなエラー メッセージ オーバーレイ (「e」スウォッチでスタイル設定) を表示しますが、これはしばらくすると消えて、ナビゲーション フローが中断されることはありません。エラー メッセージの例を表示します。
ローカルで内部的にリンクされた「ページ」
単一の HTML ドキュメントには、「ページ」のデータ ロールを持つ複数の div をスタックすることによって一緒に読み込まれる複数の「ページ」を含めることができます。各「ページ」ブロックには、「ページ」(href="#foo") 間の内部リンクに使用される一意の ID (id="foo") が必要です。リンクがクリックされると、フレームワークは ID を持つ内部「ページ」を探し、それをビューに遷移させます。
Ajax 経由で読み込まれたモバイル ページから複数の内部ページを含むページにリンクする場合は、リンクに rel="external" または data-ajax="false" を追加する必要があることに注意してください。これは、URL の Ajax ハッシュを消去するために、フレームワークにページ全体のリロードを行うように指示します。Ajax ページはハッシュ (#) を使用して Ajax 履歴を追跡しますが、複数の内部ページはハッシュを使用して内部ページを示すため、これら 2 つのモード間でハッシュに競合が生じるため、これは重要です。
たとえば、複数の内部ページを含むページへのリンクは次のようになります。
マルチページ リンク 各ページ ラッパーに配置された ID にリンクすることでナビゲートされる 2 つの jQuery Mobile div で構築された 2 "ページ" サイトの例を次に示します。ページ ラッパーの ID は、内部ページ リンクをサポートするためにのみ必要であり、各ページが個別の HTML ドキュメントである場合はオプションであることに注意してください。body 要素内の 2 つのページは次のようになります。