7

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

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

它导致浏览器显示一行：“未定义”。

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

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

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

  • 我想要漂亮的 Jquery 移动过渡
  • 这在 Ajax 中要快得多
  • 每当框架可能发送重定向时，我不想怀疑每个链接

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

4

2 回答 2

8

在JQuery 移动社区的帮助下，我提出了一个可以处理标准 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>

我希望这可以帮助别人。

于 2012-08-13T09:27:58.020 回答
1

看起来这将是一个更好的解决方案 - 来自 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.php

1.3 的演示仍在工作 http://demos.jquerymobile.com/1.3.0/docs/examples/redirect/

于 2014-04-14T20:12:15.137 回答