如何在JQuery Mobile中获取内部页面链接的查询参数

Question

我正在寻找一种在JQuery Mobile中完成相当琐碎的事情的干净方法。

当链接到要加载到Dom中的内部页面时，我想读取查询参数。

因此，在下面的示例中，我想访问url的id = test2部分。

<div data-role="page" id="page1">
    <a href="#page2?id=test2">Go to page 2</a>
</div>  

<div data-role="page" id="page2">
    <a href="#page1?id=test1">Go back to page 1</a>
</div>

我使用 pagecontainerbeforeshow 来在页面加载时执行代码，但我不知道如何获取查询参数。

$(document).ready(function(){

    $( "body" ).on( "pagecontainerbeforeshow", function( event, ui ) {
        console.log("How to get the Query Params?");
    });

});

这是一个包含此代码的fiddle示例：http://jsfiddle.net/wpgs06r1/6/。

- wvdz

---

你的问题不够清楚。你想加载哪些参数？你是使用单页还是多页模型？ - Omar

我编辑了一下，希望能更清楚一些。 - wvdz

Answer 1

jQuery Mobile忽略（删除）URL中的查询字符串参数，并仅显示具有哈希标记的URL。但是，您可以仅在pagecontainerbeforechange和data.toPage为字符串而不是对象时检索querystring。此阶段，完整的URL存储在data.absUrl中。

您可以使用$.mobile.path.parseUrl().search方法来检索querystring，或者您可以使用.split("?")，两者都应该正常工作。

$(document).on("pagecontainerbeforechange", function (e ,data) {
   if (typeof data.toPage == "string") {
      var url = $.mobile.path.parseUrl(data.absUrl),
          querystring = url.search; /* retruns ?id=test1 */

      /* or */

      var url = data.absUrl,
          querystring = url.split("?")[1]; /* retruns ?id=test1 */
   }
});

编辑：如果查询字符串出现在哈希之后，$.mobile.path.parseUrl（url）.search将不会返回任何值，因为它认为它是一个哈希。因此，请使用第二种方法.split("?")。

---

另一种可能的方法是利用pagecontainerbeforetransition，因为它只触发一次并返回data.toPage对象和data.absUrl字符串。

自定义函数以处理URL并检索查询字符串

function getParam(url) {
    var parsed = $.mobile.path.parseUrl(url),
        hash = parsed.hash.split("?");
    return {
        search: hash[1].split("=")[1]
    };
}

监听 pagecontainerbeforetransition 事件；确保 .toPage 和 .absUrl 已定义，.toPage 的 ID 是您想要在其上使用参数的页面。

$(document).on("pagecontainerbeforetransition", function (e, data) {
    if ($.type(data.toPage) !== "undefined" && $.type(data.absUrl) !== "undefined" && data.toPage[0].id == "pageID") {
        var param = getParam(data.absUrl).search;
        $(".selector", data.toPage).text("Retrieved: " + param);
    }
});

Demo

- Omar

---

谢谢，这很棒。对我来说，pagecontainerbeforetransition 更好，因为 pagecontainerbeforechange 在每次页面加载时会触发两次。 - wvdz

@popovitsj 不用谢 :) 在 JQM 的下一个版本中，pagecontainerbeforechange 事件将会触发一次并返回一个字符串。 - Omar

做得好！好答案。 - Louis van Tonder