支持使用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移動頁面重定向

回答

相關問題