ajax - HTML5 历史 API : go back and don't allow going forward (popState? )

Question

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

结构非常简单:

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

-如果用户单击“编辑”按钮，将看到一个用于修改数据的表单。

-如果用户发送表单，则保存数据并再次显示(更新)静态数据。 用户不能使用后退按钮返回到编辑页面。

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

-如果用户在看到静态数据时点击返回，他应该总是返回到上一个页面(不是个人资料)。

我正在使用 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 并停留在同一页面)

Answer 1

使用虚拟状态

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

我已经将这个原则用于多个 Web 应用程序，并且效果很好。

这就像推送不会让您的应用程序移动但清除历史状态的状态。

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

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

---

注意事项

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