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的高速缓存链接页面相对

回答

相关问题