Question

我遇到了jQuery Mobile链接到动态页面的问题。

我有一个使用相对链接生成的链接列表，如下所示：

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

在页面page2上，我使用查询字符串中的数据动态填充字段。

问题是，如果我点击Foo，请返回，然后点击Bar，JQM实际上会再次将我带到#page2?q=Foo。我尝试在data-cache="never"上设置page2，但没有运气。知道为什么链接实际上不是它的原因，而是自页面加载以来第一次点击的链接？

编辑：示例网站此处 [已修复]。只需点击任何项目，返回，然后尝试转到另一个项目。你会再次获得第一名。

编辑：我尝试过设置data-dom-cache =“false”这没有用，因为它不是缓存页面，而是缓存链接（也许？）。我也试过从DOM中删除页面，但是当我尝试重新导航到页面时，我无法继续，因为它已经消失了。

我尝试通过在点击/点击时以编程方式设置页面值来解决此问题，但在尝试加载特定页面时（对于书签/深层链接），这不起作用。

编辑2：我认为我发现了可能导致此问题的相关问题。当我加载每个页面时，我解析出document.location.search。奇怪的是，使用URLS

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。我使用这两个属性是错误的吗？

Answer 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>

Answer 2

您使用的是document.location.search和document.location.hash错误。构造URL使得片段（散列）位于查询字符串（搜索）之后。当您创建具有？的URL时在＃之后，URL解析器将整个事件视为哈希。

例如：

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

VS

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

Answer 3

不确定你是否已经修好了，因为你的例子中的链接每次都会占用不同的页面？

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

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

jQuery Mobile缓存链接到相对页面

3 个答案: