Question

我正在构建一个基于MVC框架的JQuery Mobile应用程序。

我的问题是我无法向浏览器发送“重定向”指令（HTTP，Javascript，META-refresh）。

导致浏览器显示一行：“ undefined ”。

以下是服务器端重定向的代码：

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

我知道我可以使用data-ajax=false解决问题，但我不希望这样：

我想要很好的Jquery移动过渡
这在Ajax中要快得多。
每当框架发送重定向

有没有办法让JQuery Mobile正确处理一种重定向？ HTTP，HTML META还是Javascript？

Answer 1

在JQuery mobile community的帮助下，我提出了一个优雅的解决方案，可以处理标准HTML重定向（data-ajax="false"）和JQM页面转换。

诀窍在于，在进行JQM转换时，JQM使用javascript加载结果HTML;搜索页面`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>

我希望这有助于某人。

Answer 2

看起来这将是一个更好的解决方案 - 来自jQuery Mobile演示。

基本上，您在重定向中设置了一个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/redirect.php

1.3的演示仍然有效http://demos.jquerymobile.com/1.3.0/docs/examples/redirect/

使用Ajax调用支持Jquery移动中的页面重定向

2 个答案: