JQueryMobileを使用してハイパーリンクをクリックすると「error loading page」エラーが表示されます.
jquery mobileを使用してdialogを作成中にロードエラーが発生しました.「Error Loading Page」です.
なぜなら、jquery mobileページはデフォルトでajax方式でインタラクティブですが、ajax方式ではf://、つまりローカルファイルはサポートされていないため、2つの解決策があります.
1.ハイパーリンクにdata-ajax="false"属性を追加または追加
ホームページにアクセス
2.ジャンプページをサーバに公開する
他のいくつかのジャンプについては、以下を見てください.さまざまな接続のジャンプの本質を理解してみましょう
外部ページリンク
JQuery Mobileはajaxサイトとプログラムを作成する過程を自動化した.
デフォルトでは、リンクをクリックすると、.products.htmlなどの外部ページを指しますが、フレームワークはリンクのhrefプロパティを解析しajaxリクエスト(Hijax)を発行し、ロード中のプロンプトを表示します.
ajaxリクエストが成功すると、新しいページの内容がDOMに追加され、すべてのmobile widgetが自動的に初期化され、新しいページがアニメーション遷移表示されます.
ajaxリクエストが失敗した場合、フレームワークには小さなエラーメッセージ('e'パレットのスタイル)が表示され、一定期間消え、現在のナビゲーションフローは破壊されません(ページがリフレッシュされず、前進後退ボタンにも影響しません).
内部ページリンク
単一のHTMLドキュメントには複数の「page」を含むことができ、1つのページに複数の
ajaxを介してmobileページから複数の内部ページを含むページにリンクしている場合は、リンクに追加する必要があります.
たとえば、複数の内部ページを含むページへのリンクは、次のようになります.
ここでは、2つのjQuery Mobile divによって構築された2'pageページの例があり、各divはそのIDによってナビゲートされます.これらのpage上のIDは内部のページリンクをサポートするだけで、各ページが分離されたHTMLドキュメントであれば、これらのIDはオプションです.以下は2つのpageで、
バックリンク
aラベルを使用すると
ディレクトリへのリダイレクトとリンク
ディレクトリアドレスにリンクする場合(href="typesofcats/"でhref="typesofcats/"でhref="typesofcats/index.html")は、urlの最後の"/"の後ろの部分がファイル名であると仮定するため、jQuery Mobileはこの部分を削除し、将来ページが参照されるときにベースアドレスを作成する.
しかし、
このリンクは、ディレクトリ内のインデックス・ページである「docs-links-urltest/index.html」を指します. Test Link 戻ってきたページは「docs/pages/docs-links-urltest/」(後ろのスラッシュを含む)でhashを更新します.これはそのページのdata-urlの値によって完成します.この値がhash全体を置き換えるかどうかは、あなた自身にかかっています.リフレッシュまたはリンクを深くするときにURLからの要求が正しいページを解析できることを覚えておいてください.
なぜなら、jquery mobileページはデフォルトでajax方式でインタラクティブですが、ajax方式ではf://、つまりローカルファイルはサポートされていないため、2つの解決策があります.
1.ハイパーリンクにdata-ajax="false"属性を追加または追加
rel="external"でよいajaxを無効にする.ホームページにアクセス
2.ジャンプページをサーバに公開する
他のいくつかのジャンプについては、以下を見てください.さまざまな接続のジャンプの本質を理解してみましょう
外部ページリンク
JQuery Mobileはajaxサイトとプログラムを作成する過程を自動化した.
デフォルトでは、リンクをクリックすると、.products.htmlなどの外部ページを指しますが、フレームワークはリンクのhrefプロパティを解析しajaxリクエスト(Hijax)を発行し、ロード中のプロンプトを表示します.
ajaxリクエストが成功すると、新しいページの内容がDOMに追加され、すべてのmobile widgetが自動的に初期化され、新しいページがアニメーション遷移表示されます.
ajaxリクエストが失敗した場合、フレームワークには小さなエラーメッセージ('e'パレットのスタイル)が表示され、一定期間消え、現在のナビゲーションフローは破壊されません(ページがリフレッシュされず、前進後退ボタンにも影響しません).
内部ページリンク
単一のHTMLドキュメントには複数の「page」を含むことができ、1つのページに複数の
data-role="page"のdivを含めるだけでよい.各pagedivは一意のID(id="foo")でなければならず、対応するページにリンクしてアンカーを使用すればよい(href="#foo").1つのリンクをクリックすると、フレームはアンカーhrefの内部「page」としてidを探して現在のインタフェースに表示する.ajaxを介してmobileページから複数の内部ページを含むページにリンクしている場合は、リンクに追加する必要があります.
rel="external" または data-ajax="false" . このプロパティは、フレームワークがページを再ロードすることを通知し、url hashもクリアする.ajaxページはhash(#)を使用してajax履歴を追跡し、複数の内部pageを含むページがhashを使用して内部pageを示すと衝突するため、非常に重要である.たとえば、複数の内部ページを含むページへのリンクは、次のようになります.
<a href="multipage.html" rel="external">Multi-page link</a> ここでは、2つのjQuery Mobile divによって構築された2'pageページの例があり、各divはそのIDによってナビゲートされます.これらのpage上のIDは内部のページリンクをサポートするだけで、各ページが分離されたHTMLドキュメントであれば、これらのIDはオプションです.以下は2つのpageで、
bodyにあります. 元素の中<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>
View internal page called <a href="#bar">bar</a>
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /header -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>
<a href="#foo">Back to foo</a>
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /header -->
</div>
<!-- /page -->
</body>
注意:hashを使用してajax'page'のすべての履歴を追跡しているため、現在ではjQuery Mobile pageではリンクを通常のアンカーとして使用することはできません(index.html#foo).フレームワークが1つの ID #foo 'page'は、通常のHTMLページのようにそのIDを含むコンテンツをスクロールするのではなく、ジャンプする.バックリンク
aラベルを使用すると
data-rel="back" プロパティは、上のクリックで後退ボタンをシミュレートし、hrefプロパティを無視します.これは、「home」へのリンクがある場合やjavascriptで後退ボタンを生成した場合、ダイアログボックスを閉じるためのボタンなど、名前の付いたページにリンクするのに役立ちます.ソースコードでこのプロパティを使用する場合、必ず意味のあるhrefを提供して実際にページを参照するURLを指摘します(これにより、この特性はC級ブラウザでも機能します).同様に、履歴で本当に後退せずに後退遷移を単純に使用するだけで、使用できることを覚えておいてください. data-direction="reverse"に代わる.ディレクトリへのリダイレクトとリンク
ディレクトリアドレスにリンクする場合(href="typesofcats/"でhref="typesofcats/"でhref="typesofcats/index.html")は、urlの最後の"/"の後ろの部分がファイル名であると仮定するため、jQuery Mobileはこの部分を削除し、将来ページが参照されるときにベースアドレスを作成する.
しかし、
data-urlの属性が指定されたpage divを返すことで、この問題を解決することができます.jQuery Mobileは、この属性の値を使用してURLを更新し、過去に要求されたページを置き換えることができます.これにより、urlの変更をリダイレクトの結果として返すことができます.例えば、フォームを「/login.html」に提出することができますが、コミットに成功するとurl「/account」に戻ることができます.このリンクは、ディレクトリ内のインデックス・ページである「docs-links-urltest/index.html」を指します. Test Link 戻ってきたページは「docs/pages/docs-links-urltest/」(後ろのスラッシュを含む)でhashを更新します.これはそのページのdata-urlの値によって完成します.この値がhash全体を置き換えるかどうかは、あなた自身にかかっています.リフレッシュまたはリンクを深くするときにURLからの要求が正しいページを解析できることを覚えておいてください.