在不允许通过 URL 手动更改的情况下启用后退按钮答案

【问题标题】：Enabling the back button without allowing manual changes through the URL在不允许通过 URL 手动更改的情况下启用后退按钮
【发布时间】：2015-12-06 00:17:16
【问题描述】：

我正在开发一个 jQuery Mobile 应用程序。 jQuery Mobile 默认使用pushState 来允许浏览器的后退按钮动态工作。

现在，我的应用程序旨在动态更改其页面，并且用户在加载应用程序时应该始终到达首页。

问题是，每当我转到应用程序中的页面时，jQuery Mobile 都会更新 URL 中页面的哈希值。现在，如果用户在应用程序中输入相同的哈希值，jQuery Mobile 将自动将它们带到该页面（当我希望它们由我的代码处理时）。此外，如果他们刷新页面，我希望我的代码将它们带回应有的位置，而不是直接移动到 URL 的哈希值。

为了防止这种情况，我尝试在mobileinit 事件中添加以下代码：

$.mobile.hashListeningEnabled = false;

这可行，但它也会禁用 pushState 更新，这反过来会破坏后退按钮，这是我不希望发生的。

什么是允许用户使用后退按钮但仍不允许在页面之间手动移动的最佳方式？

【问题讨论】：

你已经在这个问题上投入了 100 个代表；您有两个答案，它们是否帮助您解决了问题？

标签： javascript jquery jquery-mobile pushstate

【解决方案1】：

我没有太多的元素来描述您的问题的可能且准确的解决方案，但一个简单的应该是这样的：

在您页面上每个链接到另一个链接上附加这样的功能：

$(DOMElem).on("click",function(){
  sessionStorage["urlChangedByLink"] = "true";
});

在同一页面，如果没有问题，您可以尝试：

$( window ).on( "navigate", function( event, data ) {
  if(sessionStorage["urlChangedByLink"] == "true")
    $.mobile.hashListeningEnabled = true;
  else
    $.mobile.hashListeningEnabled = false;
});

或者这个，在另一个页面上检查这个存储变量是否存在，然后进行操作：

if(sessionStorage["urlChangedByLink"] == "true")
  continue navigation...
else
  window.history.back();

【讨论】：

一个很好的建议，Emanuele！我过去曾使用 localStorage 来帮助我解决导航问题。我必须浏览一个目录，所以我存储了该地区的 3 位数代码，这样我就知道我在哪里！
不应该有个地方把sessionStorage["urlChangedByLink"]设置为false吗？否则它将永远是正确的。我想在窗口导航处理程序的末尾我们应该将其设置为 false。
不正确。这不包括刷新当前页面或使用哈希手动访问页面。我想知道为什么用户赞成一个完全错误的答案。

【解决方案2】：

这里的一个选项是为您的每个页面设置data-url，您只需将属性添加到您的页面div 并将其设置为等于您的主页，这样历史记录中显示的页面的网址就没有哈希值（或者您可以包含自己的值）。这方面的文档更好地解释in the jquery mobile documentation

【讨论】：