7

MVC フレームワークに基づいて JQuery Mobile アプリケーションを構築しています。

私の問題は、「リダイレクト」ディレクティブ (HTTP、Javascript、META-refresh のいずれか) をブラウザーに送信できないことです。

その結果、ブラウザーに " undefined " という 1 行が表示されます。

サーバー側でのリダイレクトのコードは次のとおりです。

<html><head>
      <script>location.href='$url'</script>
</head></html>

を使用して問題を解決できることはわかっていますdata-ajax=falseが、次の理由から、それは望ましくありません。

  • 素敵な Jquery モバイル トランジションが欲しい
  • これはAjaxではるかに高速です
  • フレームワークがリダイレクトを送信する可能性があるたびに、各リンクについて知りたくありません

JQuery Mobile で 1 種類のリダイレクトを正しく処理する方法はありますか? HTTP、HTML META、または Javascript のいずれか?

4

2 に答える 2

8

JQueryモバイルコミュニティの助けを借りて、標準のHTMLリダイレクト（data-ajax="false"）とJQMページ遷移の両方を処理できる洗練されたソリューションを思いつきました。

秘訣は、JQMトランジションを実行するときに、JQMが結果のHTMLをjavascriptでロードすることです。ページ`data-role='page'を検索し、DOMで置き換えます：HTMLヘッダーを無視します。

したがって、標準のJavascriptリダイレクトをヘッダーに配置し、JQMページをダミーページにロードする必要があります。

これが私のMVCテンプレートのリダイレクトメソッドのコードです：

<html>
    <head>
        <!-- HTML reload (for data-ajax=false) -->
        <script>
            location.href='<?= $url ?>'
        </script>
    </head>
    <body>
        <!-- Change page : JQueryMobile redirect -->
        <div data-role="page" id="redirect">
            <script>
                $.mobile.changePage('<?= $url ?>');
            </script>
        </div>
    </body>
</html>

これが誰かに役立つことを願っています。

于 2012-08-13T09:27:58.020 に答える
1

jQuery Mobile demos から、これがより良い解決策であるように見えます。

基本的に、リダイレクトに http ヘッダーを設定し、 で探しますpagecontainerload。これにより、ブラウザの履歴の奇妙さを回避できます。

a hrefページへのアクセスはこちら

<a href="redirect.php?to=redirect-target.html" 
   data-role="button" data-inline="true">Redirect</a>

PHPでは、これを行います

<?php
// ************************************************************************
// The two-second sleep simulates network delays, hopefully causing a
// loading indicator message to appear on the client side.
// ************************************************************************
sleep(2);

$dst = ( isset( $_GET[ "to" ] )
    ? $_GET[ "to" ]
    : ( isset( $_POST[ "to" ] )
        ? $_POST[ "to" ]
        : false ) );
if ( $dst ) {
    // **********************************************************************
    // The crucial line: Issue a custom header with the location to which the
    // redirect should happen. For simplicity, we simply redirect to whatever
    // location was specified in the request's "to" parameter, but real-world
    // scripts can compute the destination based on server-side state.
    //
    // NB: This is not a HTTP redirect. As far as HTTP is concerned, this is
    // a normal request/response cycle with a status code of 200.
    // **********************************************************************
    header( "X-Redirect: " . $dst );
}
?>

次に、JavaScript でこれを行い、URL をインターセプトしてリセットします。

$( document ).bind( "pagecontainerload", function( e, triggerData ) {

        // We can use this event to recognize that this is a redirect. The event is
        // triggered when jQuery Mobile has finished loading a page and inserting
        // it into the DOM, but before it has altered the browser history. In this
        // example the server helpfully returns a custom header. However, if you
        // don't have access to the server side, you can still examine
        // triggerData.page, which contains the page that was loaded, but which
        // has not yet been displayed or even recorded in the browser history. You
        // can also examine triggerData.xhr which contains the full XMLHTTPRequest.
        // If there is a way to recognize that this is not the expected page, you
        // can discard it and issue a second load() call for the page that really
        // needs to be displayed to the user, reusing the options from the overall
        // page change process.

        var redirect = triggerData.xhr.getResponseHeader( "X-Redirect" );
        if ( redirect ) {

            // We have identified that this page is really a redirect. Thus, we load
            // the real page instead, reusing the options passed in. It is important
            // to reuse the options, because they contain the deferred governing this
            // page change process. We must also prevent the default on this event so
            // that the page change process continues with the desired page.
            $( e.target ).pagecontainer( "load", redirect, triggerData.options );
            e.preventDefault();
        }
    });

注: 執筆時点で、このデモの jquery デモ ページに壊れたリンクがあったため、github で検索する必要がありました。

https://github.com/jquery/jquery-mobile/blob/master/demos/navigation-php-redirect/index.php https://github.com/jquery/jquery-mobile/blob/master/demos/navigation -php-リダイレクト/redirect.php

1.3 のデモはまだ動作してい ます http://demos.jquerymobile.com/1.3.0/docs/examples/redirect/

于 2014-04-14T20:12:15.137 に答える