jQuery Mobile的HREF鏈接不加載新頁

我是一個來自意大利的網絡devoper ...我有一個問題，加載與HREF 例如：我這段代碼有one.htmljQuery Mobile的HREF鏈接不加載新頁

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
    <title>dkrMobile</title> 
    <!--caricamento librerie--> 
    <script src="js/jquery-1.9.1.min.js"></script> 
    <script src="js/jquery.mobile-1.3.1.min.js"></script> 
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"> 
</head> 
<body> 
<!-- LOGIN --> 
<div data-role="page" id="loginPage"> 
    <div data-role="content"> 
     <div style=" text-align:center"> 
      <img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png"> 
     </div> 
     <form action="#pageFile"> 
      <div data-role="fieldcontain"> 
       <label for="userNameLogin"> 
        Username 
       </label> 
       <input name="" id="userNameLogin" placeholder="" value="" type="text"> 
      </div> 
      <div data-role="fieldcontain"> 
       <label for="passwordLogin"> 
        Password 
       </label> 
       <input name="" id="passwordLogin" placeholder="" value="" type="password"> 
      </div> 

      <a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues"> 
       Login 
      </a> 

     </form> 
    </div> 
</div> 
</body> 
</html>

和帶有此代碼的two.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
    <title>dkrMobile</title> 
    <!--caricamento librerie--> 
    <script src="js/jquery-1.9.1.min.js"></script> 
    <script src="js/jquery.mobile-1.3.1.min.js"></script> 
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"> 
    <link rel="stylesheet" href="css/jqm-icon-pack-fa.css"> 
    <script type="text/javascript" src="js/tolito-1.0.5.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" /> 

    <!--css userinterface--> 
    <link rel="stylesheet" href="css/ui.css" /> 




</head> 
<body> 

<div data-role="page" id="loadingPage"> 
    <div data-role="content"> 
    <h1>caricamento di tutti i contenuti in corso</h1> 
    <a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a> 
    </div> 
</div> 

<div data-role="page" id="pageFile"> 
    <div data-role="content"> 
    <h1>dueeee</h1> 

    </div> 
</div> 

<!-- FILE--> 

</body> 
</html>

現在如果點擊登錄 - two.html將不會被加載。

想要一個demo？ here the demo

如果我點擊跳過在two.html不要顯示任何東西（如果我刷新頁面，它開始工作）。

唯一的辦法是data-ajax =「false」？爲什麼？

來源

2013-07-12 r1si

我不確定這是多麼正確，但它適用於我，其中每個頁面實際上是一個HTML文件內的div，因此鏈接到第二頁將鏈接到div與數據角色設置爲「頁面」和id設置爲「two」 – scrineym

它應該可以正常工作，使用'ajax'啓用'data-ajax = true'。 – Omar

這不是一個錯誤。要理解這個問題，你必須瞭解jQuery Mobile是如何工作的。

多HTML模板不能與多頁面模板混合使用。例如，當處理幾個頁面時，只有第一個頁面可以有多個頁面。當其他HTML jQuery Mobile的加載文件將帶鋼頭部（我們不需要它，因爲第一HTML HEAD內容已經被加載到DOM），它將只加載第一頁它可以在一個文件中找到，所有其他頁面會被丟棄。

data-prefetch不會幫你在這裏。你也被不正確地對其進行初始化，數據預取屬性沒有價值，它只是data-prefetch，例如：

<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>

如果您想了解更多jQuery Mobile的如何處理多個HTML和多頁模板什麼的他們看看這個ARTICLE或THIS一。要透明，他們是我的個人博客文章。你需要知道的一切都可以在那裏找到。

基本上解決您的問題將有一個HTML文件中的所有頁面，或者你應該剎車two.html成兩個獨立的HTML文件。你決定什麼是最適合你的解決方案。

來源

2013-07-12 10:31:57 Gajotres

感謝您的回覆，但我有另一個問題，是安全使用登錄多頁面佈局？ – r1si

如果你正在創建一個混合移動應用程序，那麼答案是肯定的（這是安全的），但如果你正在創建桌面Web應用程序，那麼它是不安全的。即使greasemonkey插件也可以跳過登錄頁面。當然，如果你還有一個服務器端邏輯可以檢查使用是否失敗，這不是一個大問題。 – Gajotres

+1不錯的答案.. – Omar

jQuery Mobile的HR​​EF鏈接不加載新頁

回答

相關問題

jQuery Mobile的HREF鏈接不加載新頁