启用后退按钮,而不允许通过网址

时间:2015-12-06 00:17:16

标签: javascript jquery jquery-mobile pushstate

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

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

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

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

$.mobile.hashListeningEnabled = false;

这样做有效,但它也会禁用pushState更新,这会更改后退按钮,我不希望这种情况发生。

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

2 个答案:

答案 0 :(得分:6)

我没有太多的元素来描述您的问题的可能和准确的解决方案,但一个简单的解决方案应该是:

在您网页上的每个链接上转到另一个链接附加一个这样的函数:

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

答案 1 :(得分:0)

此处的一个选项是为您的每个网页设置data-url,只需将该属性添加到您的网页div,并将其设置为与您的主页相同,即所显示的网页网址历史记录没有哈希值(或者您可以包含自己的值)。关于此的文档可以更好地解释in the jquery mobile documentation