将参数传递给 jQuery Mobile 中的页面 ID答案

【问题标题】：Passing parameters to a page-id in jQuery Mobile将参数传递给 jQuery Mobile 中的页面 ID
【发布时间】：2012-01-04 13:01:34
【问题描述】：

我正在尝试将一些参数传递给在 jQuery Mobile 中创建的页面 ID。

该站点由带有链接的列表视图组成，每个链接中都有哈希编码，如下所示：

<li><a href="#pronostico?region=12&ciudad=0">Puerto Natales</a></li>

我已绑定pagebeforechange 以捕获 URL 中的哈希值，进行参数检测并根据传递的参数数量采取措施。

现在，有了 cookie，我一直在尝试这个：

$(document).one("pageinit", function(event, data) {
  if (location.hash.search(/^(#ciudades|#pronostico)/) === -1) {
    if ($.cookie("recordar")) {
      $.mobile.changePage($("#pronostico"), {
        data: "region=" + $.cookie("region") + "&ciudad=" + $.cookie("ciudad")
      });
    }
  }
});

但它只是将我传递给#pronostico page-id，哈希中没有参数。结果，我得到的页面没有它应该显示的信息。

提前致谢。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

是的，默认情况下不支持散列参数。我一直在使用以下插件来给我这个，到目前为止它工作得很好;-)

jqm.page.params

更新 - 如何使用：

我在包含 jqm.page.params.js 之后添加了以下代码：

$(document).bind("pagebeforechange", function( event, data ) {
    $.mobile.pageData = (data && data.options && data.options.pageData)
        ? data.options.pageData
        : null;
});

例如，一个页面被调用如下： index.html#search?id=mysearchkeyword 现在可以在我感觉的任何页面事件中访问此信息：

$(document).on("pagebeforeshow", "#firstpage", function(e, data){ 
        if ($.mobile.pageData && $.mobile.pageData.id){
            console.log("Parameter id=" + $.mobile.pageData.id);
        }
 });

将“mysearchkeyword”打印到您的日志记录控制台。

希望这会有所帮助！

PS：请注意，我与插件或它的作者没有任何关系

编者注：作者将此作为第二个代码块。在 Jquery 1.9 中，live 被删除了，所以我用 .on 语法更新了上面的示例。这是原文：

$("#firstpage").live("pagebeforeshow", function(e, data){
    if ($.mobile.pageData && $.mobile.pageData.id){
        console.log("Parameter id=" + $.mobile.pageData.id);
    }
});

【讨论】：

这似乎很有用，我想我需要你的样本来了解它是如何工作的。使用此插件时，我是否需要更改在我的站点中实现的pagebeforechange？
我的示例代码作为上面的更新添加，如果这对您有用，请标记为答案！谢谢
我遇到了类似的问题，发现这个答案很有帮助。 stackoverflow.com/questions/10354455/…
这个jqm参数是否支持在单个模板页面之间传递参数？
这个插件被jQuery Mobile 1.3破坏了，作者已经一年多没有在GitHub上活跃了。

【解决方案2】：

不过，该插件不支持书签。如果您添加一个 pagechange 处理程序，您可以通过在 jQM 完成后将参数放回 url 来解决这个问题：

// list of inner pages where you want to support params AND bookmarking
// maybe better to use a CSS class name to mark them
var $paramPages;
$(document).ready(function() {
    $paramPages = $('#book, #order');
});

// put the params back into the location once jQM is done
//
$( document ).bind( "pagechange", function( e, data ) {
    if (data.toPage.is($paramPages) && data.absUrl) {
        window.location.replace(data.absUrl);
    }
});

【讨论】：

【解决方案3】：

看起来在页面之间传递 URL 参数的一种方法是在 jQuery Mobile 文档的这个示例中使用哈希处理方法： http://demos.jquerymobile.com/1.4.1/navigation-hash-processing/

此解决方案似乎很理想，因为与其他解决方案不同，它会更新浏览器地址栏中的 URL，以在页面之间更改时包含 URL 参数。这种方法也无需使用任何插件，例如“jqm.page.params”。

【讨论】：