jQuery Mobile 缓存链接到相关页面答案

【问题标题】：jQuery Mobile caching link to relative pagejQuery Mobile 缓存链接到相关页面
【发布时间】：2012-03-12 22:42:31
【问题描述】：

我在使用指向动态页面的 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。奇怪的是，像

这样的 URL

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。我是不是用错了这两个属性？

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

您有一个多页文档，并使用页面 ID 将第一页与第二页链接（例如：href="#route-page?route=50%20Grit"）。

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>

【讨论】：

您说，“但是在第一个页面转换之后，URL 仍然保持不变。”那就是问题所在。这似乎是一个 JQM 错误。您的代码没有解决任何问题。 pagebeforechange 不会被解雇。即使这样做了，代码看起来也是在做同样的事情，并且由于 URL 恢复到某个缓存版本而会出现同样的问题。
如果你把我发布的 html 放到一个文件中并用浏览器打开它，你会看到在每个页面转换中都正确地检索到了路由参数。第二页中的文本输入动态填充了路由参数的值。此外，pagebeforechange 被触发。
我几乎可以正常工作了。我担心的一个问题是，即使显示的页面是正确的，但 URL 始终保持为第一个被点击的页面。

【解决方案2】：

您使用 document.location.search 和 document.location.hash 错误。 URL 的结构使得片段（散列）出现在查询字符串（搜索）之后。当您创建一个具有 ?在 # 之后，URL 解析器将整个内容视为哈希。

例如：

example.com?a=b#c 将具有 search 的 ?a=b 和 hash 的 #c

对比

example.com#c?a=b 将有一个空字符串的search 和一个#c?a=b 的hash

【讨论】：

这很有帮助，但有趣的是，当我以另一种（正确）方式形成链接时，jquery mobile 会删除搜索部分。即，指向“?a=b#c”的链接只会产生“#c”。

【解决方案3】：

不确定您是否已经解决了这个问题，因为您示例中的链接每次都指向不同的页面？

无论如何，jQuery Mobile's documentation 的这篇文章可能与您的问题有关：

jQuery Mobile 不支持将查询参数传递给内部/嵌入式页面，但是您可以添加两个插件到您的项目中来支持此功能。有一个轻量级的page params plugin 和一个功能更齐全的jQuery Mobile router plugin 用于backbone.js 或spine.js。

【讨论】：

啊，是的，我昨天确实修复了它，而这一点信息对我很有帮助。我没有使用其中一个插件，而是设置了rel="external 以防止页面的ajax加载，从而删除查询参数。