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

Question

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

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

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

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

$.mobile.hashListeningEnabled = false;

这有效，但它也禁用了 pushState 更新，这反过来又破坏了后退按钮，我不希望发生这种情况。

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

Answer 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();