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

发布于 2024-11-19 13:16:48 字数 241 浏览 6 评论 0原文

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

例如，

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

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

这可能吗？如何实现？您建议使用 hashbangs 编码参数的替代方法是什么？

原文

I am using jQuery Mobile and have few pages in one HTML page. When opening these pages, I'd like to pass parameters for them, so that their parameters are persistent in URL.

E.g.

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

It would open and I could access parameters X and Y in beforeshow event.

Is this possible and how? What alternative means you suggest for encoding parameters with hashbangs?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光礼记 2024-11-26 13:16:48

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

我会拦截所有链接上的点击并查找特定的数据元素，例如 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
}

I would suggest you don't use hash 'parameters', since current support for it is buggy.

I would intercept the clicks on all links and look for a specific data- element, say, data-params:

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

And in your HTML you can go

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

In this case you are creating a global variable, called params, which you should be able to access in a uniform manner from all your code.

You will have to parse those parameters yourself though, however that's not hard, could use something like this:

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
}

回复收藏 0 原文

面如桃花 2024-11-26 13:16:48

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

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

希望这会有所帮助。干杯

Yes, you can have links like the one you showed:

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

Then, on before show you can read this params with this code:

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

The definition of the QueryStringToHash (got from here) is the following:

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

Hope this helps. Cheers

回复收藏 0 原文