2

我有一个webpage显示用户信息的。我ajax用来允许用户在不更改网页的情况下修改此数据。

结构非常简单：

- 当用户进入个人资料时，他可以看到他的数据。

- 如果用户单击编辑按钮，则会看到一个修改数据的表单。

- 如果用户发送表单，则保存数据并再次显示静态数据（更新）。用户不应使用该Back按钮返回编辑页面。

- 如果用户在编辑时单击返回，则再次显示静态数据。

- 如果用户在看到静态数据时点击返回，他应该总是返回到上一页（不是配置文件）。

我HTML5 History API用来处理Back按钮点击。当用户提交数据时我遇到了问题，因为我希望他回到以前的状态（而不是编辑）而无法继续。这就是我现在正在做的事情：

// Edit button clicked.
function edit1(){
    history.pushState("edit", null, "");
    showForm();
}

window.addEventListener("popstate", function(e) {
    var HistoryState = history.state;
    if(HistoryState == null){
       showStaticData();
    }
    else if(HistoryState == "edit1"){
        showForm();
    }
});

$('#myForm').submit(function () {

    ...

    history.back(); // CODE TO DO WHEN THE FORM HAS BEEN SUBMITTED

    return false;
});

如果我使用 history.back() 就像我在上面的代码中所做的那样，除了用户能够单击Forward按钮之外，一切正常。如果我使用replaceState 或pushState，则该Forward按钮被禁用，但是用户可以单击该Back按钮并停留在同一页面中（我不希望那样）。

有没有办法在Forward不添加新状态的情况下禁用按钮？（我不希望用户点击Back并停留在同一页面）

4

1 回答 1

0

使用虚拟状态

虚拟状态是您明确设置为“不可显示状态”的状态：它们的主要目标是重置前向状态。我将这些特定的虚拟状态称为“已移除”状态。

我已经在几个 Web 应用程序中使用了这个原理，并且效果很好。

这就像推送不会使您的应用程序移动的状态，而是清除历史状态。

history.pushState({removed:true}, 'yourcurrenttitle','yourcurrenturl');

在 popstate events上，如果遇到这些已删除的状态，请让您的脚本不启动通常的行为。

笔记

  • 在 remove:true history.state 上的任何新 pushState 都应转换为 replaceState
  • 如果您允许您的应用程序删除其他两个状态之间的状态，您将不得不处理跳过这些已删除状态的问题
  • 当用户进入删除（虚拟）状态时，您将不得不处理初始（document.ready）情况。在我的情况下，我将用户重定向到“真实”标准状态以避免该问题并且没有充满已删除状态的历史记录。也就是说，如果您尝试处理浏览器的 F5（重新加载页面）功能。
于 2014-12-02T08:43:09.210 回答