如何最轻松地在 JQuery Mobile (JQM) 嵌入/内部页面之间传递 URL 参数/数据？

如何在嵌入的 JQuery Mobile 页面之间传递/访问 URL 参数（或简单数据）？

IE。我有一个 HTML 页面 (index.html)，其中有两个“页面”(page-id)：“文章列表”和“文章详细信息”，我想将一个 ID 传递到文章列表页面，即 index.html。 html#article-list?id=12345 并再次阅读。

我们知道框架本身不支持它（http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html）。曾经有一个名为 jqm.page.params 的插件，但多年来它并没有受到太多的喜爱，而且它不能与 JQuery 1.3 一起使用。然后还有 jQuery Mobile 路由器插件，但这似乎令人困惑和过大。

知道如何解决这个问题并在嵌入页面之间传递数据/参数吗？

根据帮助文档 http://view.jquerymobile.com/1.3.2/dist/demos/faq/pass-query-params-to-page.html到 jqm 1.3.2（最新版本 - 您已检查旧版本的文档）仍然无法将查询参数传递到嵌入页面。
但您可以使用其中之一接下来三个插件用于将查询参数传递到内部页面：

• 一个轻量级的页面参数插件 https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params（您已经提到这在 jqm 1.3 中不起作用）
• 功能更齐全jQuery Mobile 路由器插件 https://github.com/azicchetti/jquerymobile-router用于与backbone.js 或spine.js 一起使用。
• 一个非常简单的Routerlite插件 https://github.com/1Marc/jquery-mobile-routerlite

您还可以使用以下方式传递参数：

• html属性
• 网址参数
• 本地存储（永久存储）
• 会话存储（仅在会话期间启用日期）

关于前两种方法的原始答案可以找到here https://stackoverflow.com/questions/7582781/how-to-pass-and-get-parameters-between-two-pages-in-jquery-mobile。我修改了一些示例（带有 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 http://jsfiddle.net/WebSerGe/aA2LR/15/

网址参数

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 http://jsfiddle.net/WebSerGe/LWS7Q/12/

本地存储：

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 http://jsfiddle.net/WebSerGe/5Rcte/35/

会话存储

只需替换上面的示例即可localStorage on sessionStorage