如何在嵌入式 JQuery Mobile 页面之间传递/访问 URL 参数（或简单数据）？
即我有一个 HTML 页面（index.html），其中包含两个“页面”（page-id）“文章列表”和“文章详细信息”，我想将一个 ID 传递到文章列表页面，即索引。 html#article-list?id=12345 并再次阅读。
我们知道框架本身不支持它 (http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html)。曾经有一个名为 jqm.page.params 的插件，但多年来它并没有受到太多的喜爱，并且它不适用于 JQuery 1.3。然后是 jQuery Mobile 路由器插件，但它似乎令人困惑和矫枉过正。
知道如何解决这个问题并在嵌入页面之间传递数据/参数吗？
【问题讨论】：
标签： javascript jquery jquery-mobile
根据help docs 到 jqm 1.3.2（最新版本 - 您已经检查了旧版本的文档）仍然无法将查询参数传递到嵌入页面。
但是您可以使用接下来的三个插件之一将查询参数传递给内部页面：
您也可以使用以下方式传递参数：
关于前两种方法的原始答案可以找到here。我修改了一些示例（带有 url 参数的示例不起作用）。
HTML：
<div data-role="page" id="article-list">
<div data-role="content">
<ul data-role="listview" data-theme="c">
<li><a data-parm="123" href="#article-detail">123</a></li>
<li><a data-parm="321" href="#article-detail">321</a></li>
</ul>
</div>
</div>
<div data-role="page" id="article-detail">
<div data-role="content">
<div id="paramId" data-extParam=""></div>
</div>
</div>
JS：
$("a").on("click", function (event) {
var parm = $(this).attr("data-parm");
$('#paramId').attr( 'data-extParam',parm);
});
$("#article-detail").on("pageshow", function onPageShow(e,data){
alert($('#paramId').attr( 'data-extParam'));
});
例子也在jsfiddle
HTML
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Home Page</li>
<li><a href="?cid=1234#page2" rel="external">Page 2</a></li>
</ul>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Page 2</li>
<li><a href="?cid=4321#home">Home Page</a></li>
</ul>
</div>
</div>
Js：
$("#page2").on("pageshow", function onPageShow(e,data){
alert('Page 2 - CID: ' + getParameterByName('cid'));
});
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
jsfiddle 上的相同示例
HTML：
<div data-role="page" id="home">
<div data-role="content">
<a href="#page2" data-role="button" id="buttonPage">Page2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content"></div>
</div>
JS：
$("#page2").on("pageshow", function onPageShow(e,data){
alert(localStorage.getItem("localId"));
});
$('#buttonPage').click(function(e) {
localStorage.setItem("localId", 111);
});
来源可以在jsfiddle找到
只需在上面的示例中替换 localStorage sessionStorage
【讨论】：
有很多方法可以做到这一点，这取决于您的用例。如果您需要能够使用该值深度链接到一个页面，则需要使用其中一种查询参数技巧。但是，如果您有一个高度动态的应用程序，不需要能够深度链接到选择，并且只想将值从一个页面传递到另一个页面，您可以走其他路线：
使用 localStorage。 当链接到或更改到另一个页面时，设置一个 localStorage 值，并在另一个页面加载后再次在 javascript 中访问它。
使用客户端绑定框架 使用 knockoutjs 之类的东西，您可以绑定在这些相同文件页面之间保持同步的值，因为它们都是同一个视图的一部分上下文（HTML 文件）。一个很好的例子是当你有一个带有列表的页面，绑定到一个项目数组，当一个页面被选中时，另一个页面被加载，并且该页面都绑定在 selectedItem 的上下文中。
【讨论】：
我建议你使用@DextOr 在How can I get query string values in JavaScript? 的回答中的方法
其他答案也有其他方法
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
【讨论】：
非常感谢所有的答案和想法。正如我所说，我不想使用任何更大的路由框架来解决 JQM 目前（可能是暂时的）限制。
使用纯 JS 访问 url 参数的想法听起来很吸引人，但在 JQuery Mobile 和 JQuery 的某些组合中不起作用（也有关于堆栈溢出的文章）。
localStorage 建议（其中有很多）很好，但没有实用的简单示例。
希望其他人也会发现它有用的解决方案/示例：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
</head>
<body>
<div data-role="page" id="listPage">
<div data-role="content">
<ul id="swipeMe" data-role="listview" data-inset="true" data-filter="false">
<li data-icon="arrow-r"><a href="#viewDetails" id="1">Page 1</a></li>
<li data-icon="arrow-r"><a href="#viewDetails" id="2">Page 2</a></li>
<li data-icon="arrow-r"><a href="#viewDetails" id="3">Page 3</a></li>
</ul>
</div><!-- /content -->
</div><!-- /main page -->
<div data-role="page" id="viewDetails">
<div data-role="header">
<div class="ui-grid-b">
<div class="ui-block-a"><a href="#listPage" data-role="button" data-mini="true" data-theme="a">Back</a></div>
</div>
</div>
<div data-role="content">
details here..
</div><!-- /content -->
</div><!-- /detail page -->
<script type="text/javascript">
$("#viewDetails").on("pageshow", function(e, data){
var selectedId = sessionStorage.getItem("selectedId");
sessionStorage.removeItem("selectedId");
alert(selectedId);
});
$("#listPage").on("pageshow", function(e, data){
$('#swipeMe').children().each(function(){
var anchor = $(this).find('a');
if(anchor){
anchor.click(function(){
sessionStorage.setItem("selectedId", anchor.attr('id'));
});
}
});
});
</script>
</body>
【讨论】：
我最近为 jQuery Mobile 1.4+ 创建了一个解决方案。这是一个简单的 100 行插件。它在 MIT 许可下，你可以找到它here on GitHub。
【讨论】：