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

时间：2013-09-12 13:56:44

标签： javascript jquery jquery-mobile

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

即。我有一个HTML页面（index.html），其中有两个“页面”（页面标识），其中包含“文章列表”和“文章详细信息”，我希望将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路由器插件，但这似乎令人困惑和矫枉过正。

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

5 个答案:

答案 0 :(得分：5)

根据help docs到jqm 1.3.2（最新版本 - 您已检查旧版本的文档），仍然无法将查询参数传递给嵌入页面。
但您可以使用接下来的三个插件之一将查询参数传递给内部页面：

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

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

关于前两种方法的原始答案可以找到here。我修改了一些例子（例如url params没有用）。

属性

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

上

Url params

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上方的示例中重新说明

答案 1 :(得分：2)

有很多方法可以做到这一点，这取决于您的使用案例。如果您需要能够使用该值深度链接到一个页面，则需要使用其中一个查询参数hacks。但是，如果您有一个高度动态的应用程序，不需要能够深入链接到选择，并且只想将值从一个页面传递到另一个页面，您可以转到其他路径：

使用localStorage。链接到或更改为其他页面时，请设置localStorage值，并在加载其他页面后再次使用javascript访问该值。

使用客户端绑定框架使用类似knockoutjs的内容，您可以绑定在这些相同文件页面中保持同步的值，因为它们都是相同的View上下文（HTML文件）。一个很好的例子就是当你有一个包含列表的页面，绑定到一个项目数组，当一个页面被选中时，另一个页面被加载，并且该页面全部绑定在selectedItem的上下文中。

答案 2 :(得分：0)

我建议您使用@ 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, " "));
}

答案 3 :(得分：0)

非常感谢所有的答案和想法。正如我所说，我不想使用任何更大的路由框架来解决JQM当前（可能是暂时的）限制。

使用普通JS访问url参数的想法听起来很吸引人，但是在JQuery Mobile和JQuery的某些组合中不起作用（也有关于它的堆栈溢出文章）。

本地存储建议（其中有很多）很好，但没有任何实际的简单示例。

解决方案/示例，希望其他人也会发现它也很有用： 

<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>

答案 4 :(得分：0)

我最近为jQuery Mobile 1.4+创建了一个解决方案。它是一个简单的100行插件。它是在麻省理工学院的许可下，你可以找到它here on GitHub。

相关问题
最新问题