如何在JQuery Mobile中获取内部页面链接的查询参数 [英] How to get query params for internal page link in JQuery Mobile

问题描述

我正在寻找一种干净的方法来在JQuery Mobile中完成一件琐碎的事情.

I'm looking for a clean way to do quite a trivial thing in JQuery Mobile.

链接到要加载到Dom的内部页面时，我想阅读查询参数.

When linking to an internal page to be loaded into the Dom, I want to read the query params.

因此在下面的示例中，我要访问网址的id = test2部分.

So in the example below I want to access the id=test2 part of the url.

<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在加载页面时执行这样的代码，但是我不知道如何获取查询参数.

I use pagecontainerbeforeshow to perform code on loading the page like this, but I don't know how to get to the query params.

$(document).ready(function(){

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

});

这里有这样的代码: http://jsfiddle.net/wpgs06r1/6/

推荐答案

jQuery Mobile会忽略(删除)URL中的 querystring 参数，并仅显示带有 hash 的URL.但是，您只能在 pagecontainerbeforechange 和data.toPage是 string 而不是对象.在此阶段，完整的URL存储在data.absUrl中.

jQuery Mobile ignores (removes) querystring parameters in URL and shows URL with hash only. However, you can retrieve querystring only on pagecontainerbeforechange and when data.toPage is a string not an object. At this stage, full URL is stored in data.absUrl.

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

You may use $.mobile.path.parseUrl().search method to retrieve querystring, or you can use .split("?"), both should work properly.

$(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将不返回任何值，因为它认为它是 hash .因此，请使用第二种方法.split("?").

If querystring comes after hash, $.mobile.path.parseUrl(url).search will return no value as it considers it a hash. Hence, use second method .split("?").

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

Another possible way is to utilize pagecontainerbeforetransition as it fires once and returns data.toPage object and data.absUrl string.

用于处理URL并检索 querystring

Custom function to process URL and retrieve querystring

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

听pagecontainerbeforetransition；应该同时定义.toPage和.absUrl，并且.toPage的ID是您要在其中使用参数的页面.

Listen to pagecontainerbeforetransition; both .toPage and .absUrl should be defined and .toPage's ID is the page you want to utilize parameters at.

$(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中获取内部页面链接的查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！