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

How can you most easily pass URL arguments/data between JQuery Mobile (JQM) embedded/internal pages?

本文关键字：内部 之间 数据 参数 URL 嵌入式 何最轻 JQuery Mobile JQM      更新时间：2023-09-26

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

即我有一个HTML页面（index.html），其中有两个"页面"（page-id）在"article-list"和"article-detail"中，我想将一个ID传递到文章列表页面，即index.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路由器插件，但这似乎令人困惑和矫枉过正。

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

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

  • 一个轻量级页面参数插件（您提到在 jqm 1.3 中不起作用）
  • 功能更齐全的jQuery移动路由器插件，用于骨干.js或脊椎.js。
  • 一个非常简单的路由器插件

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

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

关于前两种方法的原始答案可以在这里找到。我修改了一些示例（带有 url 参数的示例不起作用）。

属性

目录：

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

网址参数

目录

<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 上的相同示例

本地存储：

目录：

<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

有许多

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

使用本地存储。链接到或更改为其他页面时，请设置一个 localStorage 值，并在加载其他页面后再次在 javascript 中访问它。

使用

客户端绑定框架 使用像 knockoutjs 这样的东西，您可以绑定在这些相同文件页面之间保持同步的值，因为它们都是同一视图上下文（HTML 文件）的一部分。一个很好的例子是，当您有一个带有列表的页面时，绑定到一个项目数组，当选择一个页面时，将加载另一个页面，并且该页面全部绑定在 selectedItem 的上下文中。

我建议您在如何在 JavaScript 中获取查询字符串值的 @DextOr 答案中使用该方法？

其他

答案也有一些其他方法

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 许可证，您可以在 GitHub 上找到它。

相关文章：