0

jquerymobile を使用して 2 つのページを作成しました。最初のものには、2 番目へのリンクが含まれています。

<a href="index.php/main/uploadView/" data-transition="none" data-icon="plus">Some page</a>

リンクをクリックすると、新しいページが読み込まれます。しかし、F5 ボタンを押すと、js スクリプトと css ファイルなしで新しいページが表示されます。最初のページの構造は次のとおりです。

<html>
    <head>
    ... js/css files ...
    </head>
    <body>
        <div data-role="page" id="..">
        ...
        </div>
    </body>
</html>

二番目：

<div data-role="page" id="...">
...
</div>

では、F5ボタンが正しく機能するようにするにはどうすればよいですか? すべてを 1 ページの中に入れた場合のように (その後、正常に動作します)

また、ヘッダーとフッターを常にコピーして貼り付けないように、ページのコンテンツ部分のみを変更することは可能ですか?

前もって感謝します

4

1 に答える 1

0

これは古いですが、多くのページビューがあり、他の場所で答えが見つかりませんでした...

目的の動作に応じて、2 つの解決策があると思います。

1 つ目は、同じテンプレート (ヘッダー、インクルードなど) を 2 ページ目とすべてのページに配置することです。これにより、ブラウザーが URL ハッシュをサポートしているかどうかに関係なく、「ディープ リンク」と更新が確実に機能します (chrome ではこれが必要ですが、IE はそれがなくても問題なく動作します)。

ステートフルネスが必要な場合、これは失敗します。ユーザーが 1 ページ目でログインまたは何かを検索し、2 ページ目に結果を表示する場合、2 ページ目へのディープ リンクは意味がなく、実際に移動するべきではありません。F5 についても同様です。リフレッシュすると状態が失われます。

これは解決策 2 につながります。ユーザーがリンクまたは更新によってアクセスした場合は、最初のページまたは「ホーム」ページにリダイレクトします。非インデックス ページのテンプレートをコピーする代わりに、ヘッダーの場所を変更するだけです。

<script>
    location.href = "index.html";
</script>

jQM での通常の ajax ページ ナビゲーションでは、ヘッダー内のスクリプトは実行されません。これは、ページに直接移動する場合にのみ実行されます。

これが失敗するのは、 mysite /index.html#/pageTwo.html のようなハッシュ化された URL に直接移動した場合です。jQM は index.html をロードし、次にヘッダー スクリプトを処理せずに pageTwo.html をロードしますが、それがステートフル ページの場合、正しく表示されません。

hasing を完全にオフにすることができます:

$.mobile.changePage.defaults.changeHash = false;

または、ページに状態が必要な場合は、pageinit ハンドラーに状態のチェックを入れて、ユーザーをインデックス ページに戻します。

于 2013-04-16T13:15:36.490 に答える