Question

我有一个显示用户信息的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并保持同一页面）

Answer 1

使用虚拟状态

虚拟状态是您明确设置为＆＃34;不可显示状态的状态＆＃34;：他们的主要目标是重置前进状态。我将这些特定的虚拟状态称为＆＃34;删除＆＃34;的状态。

我已将该原则用于多个Web应用程序，并且运行良好。

这就像推动不会使你的申请移动的状态，但是明确的历史状态。

history.pushState（{removed：true}，＆＃39; yourcurrenttitle＆＃39;，＆＃39; yourcurrenturl＆＃39;）;

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

备注

在删除时，任何新的pushState：true history.state应转换为replaceState
如果您允许应用程序删除其他两个州之间的状态，则必须处理跳过这些已删除状态的问题
当用户进入已删除（虚拟）状态时，您将不得不处理初始（document.ready）情况。在我的情况下，我将用户重定向到真实的＆＃34;标准状态以避免该问题并且没有填充已删除状态的历史记录。也就是说，如果您尝试处理浏览器的F5（重新加载页面）功能。

HTML5历史记录API：返回并且不允许继续（popState？）

1 个答案:

使用虚拟状态

备注