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

【问题标题】：how to restore the page URL in Jquery Mobile?如何在 Jquery Mobile 中恢复页面 URL？
【发布时间】：2012-03-21 00:21:59
【问题描述】：

我在 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 路径，我只是在寻找提示。感谢您的任何指示！

【问题讨论】：

标签： javascript jquery url jquery-mobile pushstate

【解决方案1】：

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

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

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

【讨论】：

是的，不是一个真正的答案 :-) 但既然它最终应该成为一个 JQM 多列插件，我将不得不继续寻找一种方法。我想我越来越接近我正在寻找的东西了。在启动我的插件时，我正在抓取 window.history.length，在我通过弹出窗口时计算条目，当我关闭时，我希望我可以返回 length@init 和 currentlength 之间的差异。让我们看看。
哦，你正在写一个插件。至少这是有道理的。
LoL - 我猜应该提到这个 :-)

【解决方案2】：

这样解决了：

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

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

【讨论】：