Javascript函数onclick，后退按钮到 "refresh"页面

Question

我环顾四周，但没有看到任何专门解决此问题的内容。我的目标是拥有一个链接，单击该链接可以添加内容或“撤消”添加该内容的操作。我正在尝试以下几点:

function ShowDiv() {
  if (null == window.set) {
    document.getElementById("box2").innerHTML = "Some Content";
    window.set = "set";
  } else
    location.reload();
}

<a href="#" onclick="ShowDiv();">Link</a>
<div id="box2"></div>

这允许我单击链接以显示某些 div 内的某些内容。然后再次单击该链接以删除该内容。

但是，我想知道是否有一种方法可以实现此结果，该方法还允许用户单击浏览器的后退按钮将页面返回到触发该功能之前的状态(例如，重新加载页面) )。

Answer 1

您正在寻找HTML5 history API 。这允许您将状态推送到历史记录中，就像浏览器加载了不同的位置一样，而无需实际发送请求并替换所有内容和 JavaScript 状态。只要您的 JavaScript 代码根据当前 URL 显示正确的内容，后退和前进按钮就可以正常工作。

资源:

• W3C
• MDN
• Dive Into HTML5