用于 hashbang 导航的 jQuery Mobile 和“查询参数”

Posted 2023-02-22

【中文标题】用于 hashbang 导航的 jQuery Mobile 和“查询参数”

【英文标题】：jQuery Mobile and "query parameters" for hashbang navigation

【发布时间】：2011-10-01 13:37:45

【问题描述】：

我正在使用 jQuery Mobile，并且在一个 html 页面中只有几页。打开这些页面时，我想为它们传递参数，以便它们的参数在 URL 中持久化。

例如

  <a href="#map?x=4&y=2"

它会打开，我可以在 beforeshow 事件中访问参数 X 和 Y。

这可能吗？怎么做？您建议使用 hashbang 对参数进行编码的替代方法是什么？

【问题讨论】：

我知道这是一个非常古老的问题，但如果你还在为此苦苦挣扎，我创建了一个 plug-in 可能会有所帮助。

【参考方案1】：

我建议您不要使用哈希“参数”，因为目前对它的支持存在问题。

我会拦截所有链接上的点击并查找特定的数据元素，例如数据参数：

    $('a').live('click',
        function(e) 
            var data = $(e.target).jqmData()
            globalParams = data.params !== null ? data.params : null
        
    )

在你的 HTML 中你可以去

<a href="#map" data-params="x=4&y=2">....</a>

在这种情况下，您将创建一个名为 params 的全局变量，您应该能够从所有代码中以统一的方式访问该变量。

您必须自己解析这些参数，但这并不难，可以使用类似这样的东西：

function getCurrentParams() 

    if (!params) 
        return null
    

    var res = 
    $(params.split('&')).each(
        function(i, e) 
            var pair = e.split('=')
            if (pair.length !== 2) 
                return
            
            res[pair[0]] = pair[1]
        
    )

    return res

【讨论】：

我特别想使用 hashbangs，因为我想让链接可以复制粘贴。感谢您对任何 cse 的意见。

【参考方案2】：

是的，您可以拥有像您展示的那样的链接：

<a href="#map?x=4&y=2"> Click here </a>

然后，在演出之前，您可以使用以下代码阅读此参数：

var params = QueryStringToHash(location.hash.substr(1));
//Now you can use params.x, params.y, etc

QueryStringToHash（来自here）的定义如下：

var QueryStringToHash = function QueryStringToHash  (query) 
  var query_string = ;
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) 
    var pair = vars[i].split("=");
    pair[0] = decodeURIComponent(pair[0]);
    pair[1] = decodeURIComponent(pair[1]);
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") 
      query_string[pair[0]] = pair[1];
        // If second entry with this name
     else if (typeof query_string[pair[0]] === "string") 
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
     else 
      query_string[pair[0]].push(pair[1]);
    
   
  return query_string;
;

希望这会有所帮助。干杯

【讨论】：

看来我必须先修补 jQuery Mobile (beta 1)。窗口加载时的自动 changePage() 逻辑不明白吗？在哈希中。这是我的临时补丁：pastie.org/2184681我应该将此报告为错误吗？

是的，它似乎仍然是 jqm 1.2 中的一个错误

@DotNetWise 这是我发现的：jqm 1.2.1：好的，如果您使用 jQuery 1.7.2；坏了，如果你使用 jQuery 1.8.3（一个无效的选择器被传递给 jQuery）。 jqm 1.3.1：已损坏，与使用的 jQuery 版本无关（查询字符串被悄悄删除）。

@mklement0 - 你的评论为我节省了很多时间！这是错误报告：github.com/jquery/jquery-mobile/issues/6216

【参考方案3】：

您查看过 jQuery 移动常见问题解答吗？ -> http://jquerymobile.com/test/docs/faq/pass-query-params-to-page.php

我目前正在使用：https://github.com/azicchetti/jquerymobile-router