jQuery移动URL参数不会在浏览器中更新，但使用“data-url”获得正确的参数

jquery mobile url parameter not updating in browser, but getting correct one with "data-url"

本文关键字：参数 data-url URL 移动 浏览器 jQuery 更新      更新时间：2023-09-26

我创建了以下示例来展示我正在经历的事情。

如果我使用页面 2a 按钮从第 1 页导航到第 2 页，则 URL 将按预期为 ...#page2？id=a。

当我单击按钮返回第 1 页，然后导航到第 2b 页时，URL 仍然会显示"#page2？id=a"，但<a>标签显然具有"#page2？id=b"的 href，当我到达 #page2 时，$(e.target).attr("data-url")是"#page2？id=b"。

知道这里发生了什么吗？ 提前感谢任何帮助。

<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
          <script>
             $("#page2").live('pageshow', function(e) {
                alert($(e.target).attr("data-url"));
                $("#page_text").html("Page 2"+($(e.target).attr("data-url").replace(/.*id=/, "")));
             });
          </script>
   </head>
   <body>
      <div data-role="page" data-theme="c" id="page1">
         <div data-role="content">
            <p>Page 1</p>
            <a href ="#page2?id=a" data-transition="flip" data-role="button">Page 2a</a>
            <a href ="#page2?id=b" data-transition="flip" data-role="button">Page 2b</a>
         </div>
      </div>
      <div data-role="page" data-theme="a" id="page2">
         <div data-role="content">
            <p id="page_text"></p>
            <a href ="#page1" data-transition="flip" data-role="button">Page1</a>
         </div>
      </div>
   </body>
</html>

代码示例也在jsfiddle上。

我能够在堆栈溢出上的这个问题的帮助下使用 jqm.page.params 插件来解决此问题。 这是我使用此插件的代码：

<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
      //Added the jqm.page.params plugin
      <script src="https://raw.github.com/jblas/jquery-mobile-plugins/35fcf54e2af380aa0e98e9f384572b02f58a1ea1/page-params/jqm.page.params.js"></script>
      <script>
         $("#page2").live('pageshow', function(e) {
            alert($(e.target).attr("data-url")+$.mobile.pageData.id);
            //$("#page_text").html("Page 2"+($(e.target).attr("data-url").replace(/.*id=/, "")));
            $("#page_text").html("Page 2"+$.mobile.pageData.id);
         });
         $(document).bind("pagebeforechange", function( event, data ) {
            $.mobile.pageData = (data && data.options && data.options.pageData)
                                   ? data.options.pageData
                                   : null;
         });
      </script>
   </head>
   <body>
      <div data-role="page" data-theme="c" id="page1">
         <div data-role="content">
            <p>Page 1</p>
            <a href ="#page2?id=a" data-transition="flip" data-role="button">Page 2a</a>
            <a href ="#page2?id=b" data-transition="flip" data-role="button">Page 2b</a>
         </div>
      </div>
      <div data-role="page" data-theme="a" id="page2">
         <div data-role="content">
            <p id="page_text"></p>
            <a href ="#page1" data-transition="flip" data-role="button">Page1</a>
         </div>
      </div>
   </body>
</html>

问题出在带有 ajax 导航的附加 url 变量上。JQM 使用附加的变量及其自己的导航。根据文档，要么丢失 ajax 导航，要么丢失变量。使用 rel="external" 将其分解为几个页面也可以解决网站（不是应用程序）的问题。

相关文章：