jQuery Mobile的高速緩存鏈接頁面相對

我在使用jQuery Mobile的鏈接到一個動態頁面的問題。jQuery Mobile的高速緩存鏈接頁面相對

我用這樣一個相對鏈接生成鏈接列表：

<a href="#page2?q=Foo">Foo</a> 
<a href="#page2?q=Bar">Bar</a>

而且page2頁面上，我用的是數據查詢字符串動態填充字段。

問題是，如果我點擊Foo，回去，然後點擊Bar，JQM實際上又帶我到#page2?q=Foo。我試着page2但沒有運氣設置data-cache="never"。任何想法爲什麼這個鏈接實際上並沒有發生什麼變化，但是自頁面加載以來第一次被點擊了？

編輯：例如網站這裏 [固定]。只需點擊任何項目，返回，然後嘗試轉到另一個項目。你會再次獲得第一名。

編輯：我試過設置data-dom-cache =「false」這沒有幫助，因爲它不是頁面被緩存，而是鏈接被緩存（也許？）。我也嘗試從DOM中刪除頁面，但是當我嘗試重新導航到頁面時，我無法完成，因爲它已經消失。

我試圖通過簡單的編程設置上點擊/點按頁面值來解決這個問題，但試圖加載特定頁面（書籤/深層鏈接）時，這是行不通的。

編輯2：我想我找到了一個可能導致這個問題的相關問題。當我加載每一頁時，我解析出document.location.search。奇怪的是，與像

http://.../#route-page?route=test 
http://.../#route-page?route=test2

document.location.search網址應返回?route=test和?route=test2和document.locations.hash應該返回#route-page兩種。我真的開始是document.location.search空字符串和document.location.hash整個事情：#route-page?route=test。我使用這兩個屬性是錯誤的嗎？

來源

2012-03-11 xdumaine

沒有的hash和當然如果你已經解決了這個問題，就像你的例子中的鏈接一樣每次都去不同的頁面？

不管怎麼說，這塊從jQuery Mobile's documentation可能與您的問題：

的jQuery Mobile不支持查詢參數傳遞給內部/嵌入網頁，但有兩個插件，您可以添加到您的項目支持此功能。有一個輕量級的page params plugin和更全面的jQuery Mobile router plugin用於backbone.js或spine.js。

來源

2012-03-12 10:52:45

啊，是的，我昨天修好了，這一點信息是幫助我的。我沒有使用其中一個插件，而是設置rel =「external」來防止頁面的Ajax加載，從而刪除查詢參數。 – xdumaine 2012-03-12 14:44:19

你有一個多頁文檔，並與你的第二個使用頁面ID鏈接的第一頁（例如：「＃路由頁路線= 50％20Grit的」 href =）。

JavaScript函數getParameterByName使用window.location.search爲了獲得URL。但是在第一次頁面轉換後，URL仍然保持不變。

嘗試使用下面的腳本，而不是getParameterByName：

<script type="text/javascript"> 
      $(document).bind("pagebeforechange", function(e, data) 
      { 
       if (typeof data.toPage === "string") 
       { 
        var urlObj = $.mobile.path.parseUrl(data.toPage); 
        var rex = /^#route-page/; 
        if (urlObj.hash.search(rex) !== -1) 
        { 
         var specificRouteName = urlObj.hash.replace(/.*route=/, ""); 
     // The specificRouteName gives you the "route" parameter.    
        } 
       } 
      }); 
    </script>

下面你可以找到它是基於你的代碼的例子。我希望這可以幫助你。

<html> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.17/themes/base/jquery-ui.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
</head> 

<body> 
    <div data-role="page" id="home" data-theme="a"> 
     <div data-role="header" data-position="fixed"> 
      <h2 class="full-text">Climbing Areas</h2> 
     </div> 
     <div id="home-content" data-role="content"> 
      <ul id="locations" class="data" data-role="listview" data-filter="true" 
       data-filter-placeholder="Search for location, type, or route/problem name" data-filter-theme="a" > 
       <li> 
        <a href="#route-page?route=mountain" data-transition="slide">Test1</a> 
       </li> 
       <li> 
        <a href="#route-page?route=sea" data-transition="flip">Test2</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <!-- end of Home Page --> 

    <!-- Route Page --> 
    <div data-role="page" id="route-page" data-dom-cache="false" data-theme="a" data-cache="never"> 
     <script type="text/javascript"> 
      $(document).bind("pagebeforechange", function(e, data) 
      { 
       if (typeof data.toPage === "string") 
       { 
        var urlObj = $.mobile.path.parseUrl(data.toPage); 
        var rex = /^#route-page/; 
        if (urlObj.hash.search(rex) !== -1) 
        { 
         var spesificRouteName = urlObj.hash.replace(/.*route=/, ""); 
         document.getElementById('tst').value = spesificRouteName; 
        } 
       } 
      }); 
     </script> 

     <div data-role="header" data-position="fixed"> 
      <h2 id="route-header" class="full-text"></h2> 
      <a href="#home" class="ui-btn-right" data-icon="home">Home</a> 

      <a href="#home" class="ui-btn-left" data-icon="arrow-l" rel="external">Back</a> 
     </div> 
     <div id="route-content" data-role="content"> 
      <h3 id="route-name"></h3> 
      <p id="route-description"></p> 
      <input id="tst" type="text" value=""> 
      <div id="route-colors" class="ui-grid-e"> 
      </div> 
      <div id="route-images" class="ui-grid-a"> 
      </div> 
     </div> 
    </div> 
</body></html>

來源

2012-03-11 13:07:31

你說：「但是在第一次頁面轉換後，URL仍然保持不變。」那就是問題所在。這看起來像是一個JQM錯誤。你的代碼沒有解決任何問題。 pagebeforechange不會被解僱。即使這樣做，代碼看起來像是在做同樣的事情，並且由於URL恢復到某個緩存版本而導致同樣的問題。 – xdumaine 2012-03-11 15:45:36

如果您將張貼在文件中的html並使用瀏覽器打開它，您將看到每個頁面轉換中都正確檢索到了路由參數。第二頁中的文本輸入動態填充路由參數的值。此外pagebeforechange被解僱。 – 2012-03-11 19:28:51

我已經有這個工作。我所關心的一個問題是，即使所顯示的頁面是正確的，該URL始終保持爲第一個被點擊的頁面。 – xdumaine 2012-03-27 15:32:33

您使用document.location.search和document.location.hash錯誤。 URL的結構使得片段（哈希）出現在查詢字符串（搜索）之後。當你創建一個具有？在＃之後，URL解析器將整個事物視爲散列。

例：

example.com?a=b#c將有?a=b一個search和hash#c的

一對

example.com#c?a=b會對空字符串的search#c?a=b

來源

2012-03-11 17:31:29

這很有幫助，但有趣的是，當我通過其他（正確）方式創建鏈接時，jquery mobile刪除了搜索部分。即，「？a = b＃c」的鏈接僅導致「#c」。 – xdumaine 2012-03-11 18:45:46

jQuery Mobile的高速緩存鏈接頁面相對

回答

相關問題