如何使用history.js启用/禁用浏览器中的“点击前进”按钮？

Question

使用 history.pushState，我们可以通过历史 API 更改当前 URL。使用 popstate 函数，我们可以返回到上一页。但是在返回时，我发现浏览器中的前进链接按钮“点击此处前往”会被禁用。现在，使用历史记录，我需要访问该按钮的属性。

如何使用历史 API 访问前进按钮的 URL？

- Ganesh Babu

Answer 1

你是手动弹出状态吗？听起来像是被移除了。

要返回，你应该使用 history.back()。 history.back() 将保留历史记录中的条目，这样你就会看到向前按钮处于启用状态，可以向前返回。

你也可以使用 history.go(X) 指定要返回多少条目。例如：history.go(-3) 会让你返回三个页面。

来源：MDN

- Etai

---

我正在使用Ajax，只需要我的URL在history.pushState()中得到更改。 history.back() 只是加载历史记录中的页面。 - Ganesh Babu

你写道：“但是在返回时，我发现浏览器中的前进链接按钮“点击此处前进”被禁用了。”如果您使用history.back()，那么前进将不会被禁用...在那个阶段你在做什么？您能提供一个jsfiddle吗？您能举个例子说明一种情况以及您希望它如何工作吗？ - Etai

Answer 2

我更喜欢使用AJAX方法，因为当页面发生回退（或前进）时，所有的JS变量（页面范围内）都会保留旧值。首先，您需要创建一个带有time（服务器）的JS变量，然后通过AJAX检查此值。当黑客（超级初学者）想要通过回退/前进访问URL时，这种方法会显示alert('You are Hacker.Oops')并更改位置。

page.php

<script type="text/javascript">
<?php $expire=time()+120; // 2 minute
$expire_hash=md5($expire+'SECRET-KEY'); // optional for security purposes
?>
$.get('anti-back-forward.php?<?php echo "expire=$expire&expire_hash=$expire_hash"?>',
function(content){
   if(content=='BAD'){
      alert('You are hacker.Oops');
      window.location='index.php'; 
   }
});
</script>

anti-back-forward.php

extract($_GET);
if(($expire<time()) ||  $expire_hash!=md5($expire+'SECRET-KEY'))
   die('BAD');
echo "OK";

- MajidTaheri