1

我在 Jquery Mobile 中使用嵌套页面：

看起来像这样：

// wrap page
<div data-role="page" id="wrap">
     // panel
     <div data-role="panel" data-id="popover">
         // nested pages
         <div data-role="page" id="nested1"></div>
         <div data-role="page" id="nested2"></div>
     </div>
</div>

在转换时，我正在切换$.mobile.pageContainers以将嵌套页面加载到面板中，而不是加载到正文中（默认 JQM），如下所示：

$.mobile.changePage( page-to-be-loaded, {
          // previous page in panel
          fromPage:from,         
          // update the URL with the nested page hash    
          changeHash:hashChange,     
          // target panel
          pageContainer: $('div:jqmData(id="popover")')
          });

这一切都按预期工作=当我在面板中加载嵌套页面时，URL更新为

http://some.com#nested1/2/3...

我的问题在于“清理” URL，当我离开包装页面并完全进入新的 JQM 页面时

在这种情况下，URL 停留在最后一个嵌套页面，当我需要告诉 JQM 我实际上仍在包装页面上时（无论嵌套页面仍在 URL 中）。

问题： 所以我正在寻找一种将 URL 更新为正确值的方法，或者是一种将页面参数设置为“出厂默认值”的好方法，因此 JQM 永远不会知道我在嵌套页面上做了任何面板转换。

我努力了：

// 1. location hash - doesn't work

   window.location.hash = ""


// 2. ReplaceState - breaks on non-push-state browsers

   // on pageinit store defaults
   var $myState = {};   
   $myState.title = document.title;
   $myState.url = location.protocol + '//' + location.host + location.pathname;

  page.data("rememberState", $myState )

  // before leaving the wrap page
  var rem = $('#wrap.ui-page-active').data("rememberState");
  if (rem && typeof rem != 'undefined') {   
     history.replaceState('null',rem.title,rem.url);
     }

// 3. Reload the page when hiding the panel - crashes my browser :-)

   $.mobile.changePage('#wrap', {
                  allowSamePageTransition: true, 
                  changeHash:true,
                  transition:none 
                  });

由于我远离 JQM 路径，我只是在寻找提示。感谢您的任何指示！

4

2 回答 2

0

像这样解决它：

当用户第一次进入网站时，我正在获取历史条目的数量：

$windowHistoryAtInit = window.history.length

比如说，历史记录中有 27 个条目，我只想在用户离开页面 A 并转到页面 B 时创建一个新条目，因此 pageA 内的所有嵌套转换不应计入 window.history 总数。

当用户离开页面时，我重新检查。

$(document).on('pagebeforehide', '#pageA', function(e, data) {
   // get number of history entries based on nested transitions
   var distance = window.history.length-self.options.$windowHistoryAtInit
   // go back distance
   window.history.go(-distance);     
   });

在我的设置中，返回距离不会触发实际的 JQM 转换，因此我只是将浏览器返回到用户进入站点时开始的位置，然后继续从 PageA 到 PageB。

我可能不得不通过从计数器中减去 -50 来调整它，因为我认为它不会超过 50 个条目。这样，当使用 window.history.length 50 输入时，计数器从 0 开始“新鲜”。

于 2012-03-20T16:21:59.160 回答
0

这更像是一种方法答案，而不是显示代码，而是首先以愚蠢的方式进行操作，然后从中学习。

问题是您没有按照平台的规定执行此操作。如果您这样做流氓，则不应使用该平台。您应该获取嵌套页面并将其删除。这是个坏主意。它不是针对这种行为进行编程的。只需在同一个文件上创建 3 个页面。然后实际阅读有关如何使用多页应用程序的文档。我已经完成了几个移动应用程序，并通过 jQuery Mobile 选择了一些不好的想法。如果您只是使用该框架并了解其局限性，那么一切都很顺利。

随着 jQuery Mobile 的升级，你将如何升级它？你会在路上制造奇怪的怪癖。这不是一个好主意。

于 2012-03-20T15:15:27.347 回答