无论表单发布错误如何,都返回到实际的上一页



我有一个带有表单的页面。在此页面上还有"返回上一页"链接,该链接使用以下JavaScript:

window.history.go(-1)

当发布表单并出现验证错误时,网站会将用户返回到同一表单页面。但是,在出现表单验证错误的情况下单击此链接会使用户在提交表单之前进入表单页面,而不是实际不同的上一页。

如何仅使用 JavaScript 让用户返回到实际的上一页?请注意,表格提交可能会多次出现错误。

验证

错误后,您可能会在重定向中使用location.replace()

这将从历史记录中删除当前页面位置并将其替换为新页面位置,因此它对页面历史记录没有影响。


另一种选择是使用 sessionStorage 在返回历史记录中的一页后检查 URL 是否实际更改。

window.onload = function() {
  document.getElementById("back").onclick = function() {
    sessionStorage.setItem("href",location.href); //store current page into sessionStorage
    history.go(-1); //go back one page
  };
  if (location.href == sessionStorage.getItem("href")) {document.getElementById("back").click();} //if current page is the same as last one, go back one page
  else {sessionStorage.removeItem("href");} //clear sessionStorage
};

在下面的演示中(SO 不允许 sessionStorage(,我必须模拟"遍历历史记录"和"每个历史记录项的页面加载",因此代码看起来略有不同,使用数组和其他变量函数,但原理应该是相同的:

码笔:https://codepen.io/anon/pen/OgBgGg?editors=1011
JSFIDDLE: https://jsfiddle.net/j0ddnboq/2/

您可以在初始加载时将"实际"上一页存储在隐藏的表单字段中,并将其与表单一起发送,然后在"返回上一页"链接js中,您可以访问该数据。

最新更新