4

jQuery Mobile を使用してモバイル サイトを構築していますが、テスターの 1 人が、jQuery に組み込まれている標準のページ読み込み機能を使用して DOM に読み込んだページを再読み込み、ディープ リンク、またはブックマークする際の問題を指摘しました。モバイル。私はドキュメント、フォーラムの投稿、github のバグ リストなどを調べて解決策を探していましたが、何が間違っているのかについて頭を悩ませています。私が見ているものを示す非常に基本的な 2 ページの例をコンパイルしました。

まず、サンプル サイトのルート フォルダー (つまり/index.html) に次のようなindex.html ページがあります。

<!DOCTYPE html>
<html>
<head>
   <title>Home Page</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<!-- main page -->
<div data-role="page" data-theme="b" id="main">
   <div data-role="header" data-theme="b">
      <h1>Home Page</h1>
   </div><!-- /header -->
   <div data-role="content">
      <ul data-role="listview" data-inset="true">
         <li><a href="news/">News</a></li>
      </ul>
   </div><!-- /content -->
</div><!-- /main page -->
</body>
</html>

「news」という名前のフォルダー (つまり/news/index.html) に、次のような2 番目のページがあります。

<div data-role="page" data-theme="b" data-add-back-btn="true" id="news">
   <div data-role="header" data-theme="b">
      <h1>News</h1>
   </div><!-- /header -->
   <div data-role="content">
      TODO: page content goes here
   </div><!-- /content -->
</div><!-- /#news page -->

だから、これはうまくいきます。「ホームページ」は正常に読み込まれます。ブラウザのアドレス フィールドに が表示されますhttp://m.example.com/。

「ニュース」リンクをクリックして、そのページを DOM にロードできます。ブラウザのアドレス フィールドに が表示されるようになりhttp://m.example.com/news/ました。ここに私の問題があります。ブラウザーのリロード ボタンをクリックすると、/news/index.htmlページがリロードされますが、メインのホームページ コンテキストが完全に欠落しているため、jQuery、css、または適切な HTML ドキュメント構造がありません。URL とそのドキュメントの内容を考えると、そうなると思います。しかし、モバイル サイトの外部からディープ リンクされている場合に機能するサブページへのリンクが必要です。

を使用してサブページにリンクするとhttp://m.example.com/#news/、これが機能し、サブページが正しく読み込まれ、ブラウザのアドレス フィールドが自動的に に書き換えられhttp://m.example.com/news/ます。これの問題点は、ページの URL をブックマーク、ツイート、電子メールなどで編集するたびに、URL を手動で編集する必要があることを人々が知る必要があることです。

DOM が正しく再作成されるように、ブラウザーを自動的にホーム ページに戻し、ユーザーに透過的にサブページの読み込みをトリガーする方法はありますか? 私は何が欠けていますか？

4

4 に答える 4

3

さて、Kane の提案に基づいて、サンプル コードをそのように変更したところ、思いどおりに動作するようになりました。

サンプル サイトのルート フォルダー (つまり/index.html) の index.html ページは、次のようになります。

<!DOCTYPE html>
<html>
<head>
   <title>Home Page</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
   <script type="text/javascript">
if( window.firstload === undefined ) {
    window.firstload = true;
}
   </script>
</head>
<body>
<!-- main page -->
<div data-role="page" data-theme="b" id="main">
   <div data-role="header" data-theme="b">
      <h1>Home Page</h1>
   </div><!-- /header -->
   <div data-role="content">
      <ul data-role="listview" data-inset="true">
         <li><a href="news/">News</a></li>
      </ul>
   </div><!-- /content -->
</div><!-- /main page -->
</body>
</html>

そして、'news' という名前のフォルダー (つまり/news/index.html) の 2 番目のページは、次のようになります。

<script type="text/javascript">
if(window.firstload === undefined) {
    for(var i=0, c=0; i < window.location.href.length; i++){
      if(window.location.href.charAt(i) == '/') {
        c++;
        if(c==3) window.location = window.location.href.substr(0,i) 
                                   + '/#'
                                   + window.location.href.substr(i);
      }
    }
}
</script>
<div data-role="page" data-theme="b" data-add-back-btn="false" id="news">
   <div data-role="header" data-theme="b">
      <a href="#main" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse"></a>
      <h1>News</h1>
      <a href="#main" data-icon="home" data-role="button" data-iconpos="notext" data-transition="fade">Home</a>
   </div><!-- /header -->
   <div data-role="content">
      TODO: page content goes here
   </div><!-- /content -->
</div><!-- /#news page -->

サブページでリロード、またはディープリンク/ブックマークを押すと、訪問者がメインページに跳ね返され、サブページが正しく読み込まれるようになりました。サブページでは、リダイレクトが に生成されhttp://m.example.com/#/news/ます。

願わくば、この情報が他の誰かがキーボードで頭を叩く数時間の節約になることを願っています。

于 2012-02-02T21:36:32.197 に答える
1

この解決策をありがとうございました。それは私にいくつかのエラーを与えていたので、私はそれを少し単純化しました、そしてそれは今私のために働いているようです：

/**
 * fixes the problem where a subpage in jquerymobile will lose its back button after a refresh. Instead a refresh takes you back to the top page
 * http://stackoverflow.com/questions/9106298/jquery-mobile-breaks-when-reloading-deep-linking-bookmarking-pages-added-to
 */
if(window.firstload === undefined && /#.+$/.test(window.location.href)) {
    window.location = window.location.href.replace(/#.+$/, '');
}

この問題が発生している他の人に役立つことを願っています。

よろしくお願いします

ウィル・フェレル

于 2012-12-06T23:15:45.727 に答える
1

最も簡単な方法は、メイン ページにリダイレクトすることです: サブページの例: login.htm

<script type="text/javascript">
    window.location="index.htm";
</script>

<div data-role="page" id='login'>
    Ur sub page
</div><!-- /page -->

data-role="page"を含むコードのみがajax 経由で挿入されるため、js コードはページがリロードされたときにのみ起動されます。

于 2012-12-29T11:22:03.230 に答える
0

サーバー側の処理を使用して、新しいリクエストに対してサイト テンプレートのコンテンツをレンダリングするか、ajax からのリクエストに対してコンテンツ自体をレンダリングするかを決定する、同様の状況があります。

基本的に、「partial」と呼ばれる post または get 変数を ajax リクエストに追加するだけで、テンプレートを含めるかどうかを決定します。

サーバー側の作業をしたくない場合 (これは IMO の理想的な方法です)、私が考えることができる他の唯一の方法は、次のようなものをすべてのページに追加することです:

if( window.firstload === undefined )
{
    // Add script tags and stylesheets to the page and potentially load
    // your site template into the DOM

    window.firstload = true;
}

最初のページが読み込まれると、変数 window.firstload が未定義になるため、すべてのスクリプト タグとスタイルシートをページに追加できます。その後、ajax window.firstload を介した後続のページの読み込みで true に設定されるため、再度発生することはありません。

于 2012-02-02T02:59:33.633 に答える