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

我正在构建基于MVC框架的JQuery Mobile应用程序。支持使用Ajax调用的Jquery移动页面重定向

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

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

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

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

我知道，我可以用data-ajax=false解决这个问题，但我不希望出现这种情况，因为：

我想要很好的Jquery移动转换
这在Ajax中速度更快
我不想怀疑每个链接何时框架可能会发送重定向

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

来源

2012-08-02 Raphael Jolivet

您使用的是哪种服务器端技术？你应该在那里做重定向。 – Jasper 2012-08-10 21:15:45

我使用PHP。我在这里做重定向。这只是Jquery移动包装与Ajax思考周围，并不符合标准重定向。 – 2012-08-13 09:15:51

你有什么问题？你得到什么错误？你为什么重定向？你的代码是什么样子创建重定向？这是一个模糊的问题。 – Jasper 2012-08-13 20:56:08

在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>

我希望这可以帮助别人。

来源

2012-08-13 09:27:58

难道你没有正确传递网址？你把它当作'' 它不应该是除非我失去了一些东西：对 – BExDeath 2012-08-17 01:33:26

从服务器端代码 – 2012-08-17 04:27:40

接种的价值你有没有找到这个更好的解决办法？还是框架支持改善服务器端重定向？如果现在由于某种原因它是多余的，我不想这样做 – 2014-04-14 16:47:00

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

基本上你在你的重定向中设置了一个http标题，并在pagecontainerload上寻找它。这应该避免浏览器历史的怪异。

这里有一个a href去的页面

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

在PHP这样做拦截的URL和重置你这样做

<?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。

$(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/

来源

2014-04-14 20:12:15

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

回答

相关问题