jQuery Mobile：リロード/ディープリンク時のブレーク/ AJAX経由でDOMに追加されたブックマークページ

jQuery Mobileを使用してモバイルサイトを構築していますが、テスターの1人がリロード、ディープリンクまたはjQuery Mobileに組み込まれた標準的なページ読み込み機能を使用して、私がDOMにロードしたページをブックマークします。私は解決策を探しているドキュメンテーション、フォーラム投稿、githubバグリストなどを見直してきました。私が間違っているかも知れません。私は、私が見ていることを示す非常に基本的な2ページの例をまとめました。jQuery Mobile：リロード/ディープリンク時のブレーク/ AJAX経由でDOMに追加されたブックマークページ

まず第一に、私はこのようになりますように私の例のサイトのルートフォルダ（すなわち/index.html）にindex.htmlページを持っている：私は 'と呼ばれるフォルダ内の2ページ目を持っている

<!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/index.html）：だから

<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をブックマーク、ツイート、電子メールなどで手動で編集する必要があることを人々が知る必要があることです。

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

出典

2012-02-02 Brandon

私は、サーバー側の処理を使用して、自分のサイトテンプレートのコンテンツを新しいリクエスト用にレンダリングするのか、それともajaxからのリクエスト用のコンテンツだけをレンダリングするのかを判断するのと同様の状況があります。

基本的に、私はajaxリクエストに 'partial'というポストまたは変数を追加するだけで、テンプレートを含めるかどうかを決定します。

あなたはその後、私は考えることができる唯一の他の方法は、すべてのページにこのような何かを追加することです（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-02 02:59:33

ありがとうございました！これは大きな助けとなりました。 – Brandon

さて、Kaneの提案に基づいて、私はサンプルコードを変更しましたが、今は私が望むように動作するようです。

例のサイトルートフォルダ（例：/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>

そして、私の2番目のページ（すなわち/news/index.html）は次のようになります。

<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-02 21:36:32 Brandon

このソリューションをありがとうございます。私はそれを少し簡略化してそれは私にいくつかのエラーを与えていた、それが今の私のために働いているようだ。この問題が発生している他の人を助け

/** 
* 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-06 23:15:45

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

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

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

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

出典

2012-12-29 11:22:03 slaver113

jQuery Mobile：リロード/ディープリンク時のブレーク/ AJAX経由でDOMに追加されたブックマークページ

答えて

関連する問題