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中的 querystring 参数，并仅显示带有哈希的URL。但是，您只能在pagecontainerbeforechange上检索查询字符串，并且当data.toPage是字符串而不是对象时。在此阶段，完整网址存储在data.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 */
   }
});

编辑：如果 querystring 位于 hash 之后，$.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

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

1 个答案: