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


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

例如。

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

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

这可能吗?怎么样?您建议使用hashbangs编码参数的替代方法是什么?


5978
2017-07-08 19:56


起源

我知道这是一个非常古老的问题,但如果你还在为此努力,我创造了一个 插入 这可能有所帮助。 - Cameron Askew


答案:


是的,你可以拥有你所展示的链接:

<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 (来自 这里)如下:

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;
};

希望这可以帮助。干杯


4
2017-07-08 20:09



看起来我必须首先修补jQuery Mobile(beta 1)。它对窗口加载的自动changePage()逻辑不明白?在哈希。这是我的临时补丁: pastie.org/2184681 我应该将此报告为错误吗? - Mikko Ohtamaa
是的,它似乎仍然是jqm 1.2中的一个错误 - Adaptabi
@DotNetWise这是我发现的: jqm 1.2.1:好的,如果你使用jQuery 1.7.2;破解,如果你使用jQuery 1.8.3(一个无效的选择器传递给jQuery)。 jqm 1.3.1:破坏,不管使用的jQuery版本(查询字符串被悄然删除)。 - mklement0
@ mklement0 - 您的评论为我节省了很多时间!这是错误报告: github.com/jquery/jquery-mobile/issues/6216 - Michal Stefanow


我建议你不要使用hash'参数',因为目前对它的支持是错误的。

我会拦截所有链接上的点击,并查找特定的数据元素,比如data-params:

    $('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
}

7
2017-07-11 05:34



我特别想使用hashbangs,因为我想使链接可以复制 - 粘贴。谢谢你在任何方面的意见。 - Mikko Ohtamaa


你有没有看过jQuery手机常见问题解答? - > http://jquerymobile.com/test/docs/faq/pass-query-params-to-page.php

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


0
2018-02-18 05:01