Question

我在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...

我的问题正在＆＃34;清理＆＃34; URL，当我离开包装页面并完全转到新的JQM页面时

在这种情况下，URL被卡在最后一个嵌套页面上，当我需要告诉JQM我实际上仍然在自适应页面上时（无论嵌套页面仍在URL中）。

问题： 因此，我正在寻找一种方法来更新网址的正确价值或将页面参数设置为＆＃34; factory-default＆＃34;所以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路径很好，我只是在寻找提示。谢谢你的指针！

Answer 1

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

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

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

Answer 2

解决这个问题：

当用户首次进入网站时，我正在抓取历史记录条目的数量：

$windowHistoryAtInit = window.history.length

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

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

$(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处开始“新鲜”。

如何在Jquery Mobile中恢复页面URL？

2 个答案: