如何在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?");
    });

});

这是这个代码的小提琴:http://jsfiddle.net/wpgs06r1/6/

Answer 1

jQuery Mobile忽略(删除)URL 中的查询字符串参数,并仅显示带有哈希的 URL .但是,您只能在以及何时是字符串而不是对象时检索查询字符串.在此阶段,存储完整的URL .pagecontainerbeforechangedata.toPagedata.absUrl

您可以使用$.mobile.path.parseUrl().search方法来检索查询字符串,或者您可以使用.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);
    }
});

演示