Jquery Mobile - ページの更新を検出 - ホームページに戻る

Question

JqueryモバイルHTML5ページ内でページの更新を検出することはできますか？

私はクライアントプロジェクトの一部としてクイズを作成しています。クイズはjtmlのモバイルdivページを1つのhtmlページ内で移動します。たとえば、ユーザーがindex.html＃quizpage3にいて、リフレッシュしたい場合リフレッシュを検出し、ナビゲーションをindex.htmlに戻します。

これは可能ですか？

乾杯 ポール

Answer 1

これは、私が働いているソリューションです。執筆時点では、それは誰かを助けるかもしれないので、うまく動作するようです。しかし、それは迅速な修正であり、より良い機能のためにサーバー側で行うのが最善です。

最初にオフです。このコードがJQMコードの前に置かれていることに注意してください。 （JQMのウェブサイトから：mobileinitイベントがすぐにトリガされるので、jQuery Mobileがロードされる前にイベントハンドラをバインドする必要があります。 "）現在のページのハッシュを取得しますが、 。ホーム・ページのようなページを右あなたの開始時に

<script type="text/javascript"> 
     var needRedirect = false; 
     $(document).bind("mobileinit", function(){ 
      var thisPage = location.hash; 
      if (thisPage != '' && thisPage != '#homepage' && thisPage != '#page1') { 
       needRedirect = true; 
      } 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

、その後はコードを所有する：

if (needRedirect) { 
    $.mobile.changePage("#homepage"); 
    needRedirect = false; 
} 

Answer 2

あなたは（のみページロードで実行されます）あなたの$(function() {});方法にしてURLをつかむと、それは＃が含まれている場合、[ホームページにリダイレクトすることができます。

編集：または純粋なJSの代替としてwindow.onload = function ...を使用してください。

Answer 3

まあ、これはあなたが別のページに移動するたびにリフレッシュコンソールログを取得する必要があり、スタートです：

• http://jsfiddle.net/nkZQQ/5/

JS

$("div:jqmData(role='page')").live('pagehide',function(){ 
    console.log('page refreshed, redirect to home'); 
    $.mobile.changePage("#home", { transition: "slideup"}); 
});​ 

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 
     Hello Refresh 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Home</li> 
      <li><a href="#page2">Page 2</a></li> 
     </ul> 
    </div> 
</div> 

<div data-role="page" id="page2" data-theme="a"> 
    <div data-role="content"> 
     Hello Page 2 
     <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a"> 
      <li data-role="list-divider">Page 2</li> 
      <li><a href="#home">Home</a></li> 
     </ul> 
    </div> 
</div>​ 

はたぶん別のイベントは、より良い仕事になります。

• http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Answer 4

私の答えは、パッチのに似ていますが、私がしたすべては私の一番上に以下を追加しました$（document）.ready行の前にローカルで参照されるjsファイル。私は信じているヘッダーのどこでもHTMLスクリプトタグに追加することができます。

if (location.hash != "" && location.hash != "pageHome") { 
    var url = location.href; 
    url = url.replace(location.hash,""); 
    location.replace(url); 
} 

Answer 5

私は少し遅れましたが、私はパッチのアイデアを駆使して非常に簡単なソリューションを作成しました。 $（document）より前のスクリプトタグまたはJSファイルでこれをスローします。レディ（）

checkPage(); 

function checkPage() { 
    var _hash = location.hash; 

    if (_hash != '' && _hash != "#home") { 
     var _url = location.href.replace(_hash, ""); 
     window.location.href = _url; 
    } 
} 

Answer 6

私は、これはあなたの助けフィル用

$(document).on("pagebeforeshow", function() { 
    window.location = "page"; 
});