JS - window.history - 删除一个状态 [英] JS - window.history - Delete a state

问题描述

使用html5 window.history API，我可以在我的web应用程序中很好地控制导航。

该应用程序目前有两个状态： selectDate （1）和 enterDetails （2）。

当应用程序加载时，I replaceState 并设置 popState 侦听器：

  history.replaceState（{stage：selectDate，...}，...）; 
 window.onpopstate = function（event）{
 that.toStage（event.state.stage）; 
}; 
  

当选择日期并且应用程序移动到阶段2时，将状态2推入堆栈：

  history.pushState（{stage：enterDetails，...}，...）; 
  

这种状态在任何时候都会被更换，以便将它们保存在历史记录中。

有三种方式可以离开第二阶段：

• 保存（ajax提交）


• 取消


• 后退按钮

后退按钮由 popstate 侦听器。取消按钮推动阶段1，以便用户可以回到他们正在进入后退按钮的详细信息。这些都工作得很好。

保存按钮应该恢复到第1阶段，并且不允许用户导航回到详细信息页面他们已经提交）。基本上，它应该使历史堆栈的长度= 1。

但似乎没有 history.delete（）或 history.merge（）。我能做的最好的是 history.replaceState（stage1），它将历史堆栈保留为： [selectDate，selectDate] 。

我如何摆脱一层？

编辑：

想到其他的东西，但它也不起作用。

  history.back（）; //将历史移动到正确的位置
 location.href =#foo; //成功移除'前进'的能力，
 //还添加了另一层到历史堆栈
  

这将历史堆栈保留为 [selectDate，selectDate＃foo] 。

所以，作为一种替代方法，是否有办法在不推动新状态的情况下删除前进历史记录？ 可能现在已经过去了，但是......就我所知，无法删除历史记录条目（或状态）。

我已选择的一个选项希望能够在JavaScript中处理历史记录，并使用 window.history 对象作为排序的载体。

基本上，当页面第一次加载时，你会创建自定义历史对象（我们将在这里使用一个数组，然后使用适合你的情况），然后执行你的初始 pushState 。我会传递你的自定义历史对象作为状态对象，因为它可能会派上用场，如果你还需要处理用户导航离开你的应用程序，并稍后回来。

  var myHistory = []; 
 
函数pageLoad（）{
 window.history.pushState（myHistory，< name>，< url>）; 
 
 //载入页面数据。 
 
 $ / code> 

现在，当您浏览时，您将添加到您自己的历史记录对象t） - 并且使用 replaceState 来保持浏览器不在循环中。



<$ （）{
myHistory.push（page_im_on_now）;
window.history.replaceState（myHistory，< name>，< url>）;

//载入页面数据。
}


当用户向后导航时，它们会达到您的基本状态（您的状态对象将为空），您可以根据您的自定义历史记录对象处理导航。

 函数on_popState（）{
 //注意一些浏览器在初始化时触发了popState加载，
 //所以你应该检查你的状态对象并相应地处理事情。 
 //（我在这些例子中没有这样做！）
 
 if（myHistory.length> 0）{
 var pg = myHistory.pop（）; 
 window.history.pushState（myHistory，< name>，< url>）; 
 
 //载入pg的页面数据。 
} else {
 //没有历史记录 - 让他们退出或保留在应用程序中。 
 
 
 $ / code> 

用户将永远无法使用他们的向前导航浏览器按钮，因为它们总是在最新的页面上。

从浏览器的角度来看，每当它们返回时，它们都立即向前推进。

从用户的角度来看，他们能够向后浏览页面，但不能转发（基本上模拟智能手机的页面堆叠模型）。

从开发人员的角度来看，您现在可以对用户在应用程序中的导航方式进行高级控制，同时仍然允许他们使用浏览器中熟悉的导航按钮。您可以随意在历史链中的任意位置添加/删除项目。如果你在历史数组中使用对象，你也可以跟踪页面的额外信息（比如字段内容和内容）。

你也可以扩展想法来处理前进导航。你需要3页 - 一个后退处理页面，一个前进处理页面和一个休息页面，通常在用户之间。然后您需要沿着您的历史对象来回浏览，而不是简单地按下/弹出项目。

Using the html5 window.history API, I can control the navigation pretty well on my web app.

The app currently has two states: selectDate(1) and enterDetails(2).

When the app loads, I replaceState and set a popState listener:

history.replaceState({stage:"selectDate",...},...);
window.onpopstate = function(event) {
    that.toStage(event.state.stage);
};

When a date is selected and the app moves to stage 2 I push state 2 onto the stack:

history.pushState({stage:"enterDetails",...},...);

This state is replaced anytime details change so they are saved in the history.

There are three ways to leave stage 2:

• save (ajax submit)
• cancel
• back button

The back button is handled by the popstate listener. The cancel button pushes stage 1 so that the user can go back to the details they were entering the back button. These both work well.

The save button should revert back to stage 1 and not allow the user to navigate back to the details page (since they already submitted). Basical, y it should make the history stack be length = 1.

But there doesn't seem to be a history.delete(), or history.merge(). The best I can do is a history.replaceState(stage1) which leaves the history stack as: ["selectDate","selectDate"].

How do I get rid of one layer?

Edit:

Thought of something else, but it doesn't work either.

history.back(); //moves history to the correct position
location.href = "#foo"; // successfully removes ability to go 'forward', 
                       // but also adds another layer to the history stack

This leaves the history stack as ["selectDate","selectDate#foo"].

So, as an alternative, is there a way to remove the 'forward' history without pushing a new state?

解决方案

You may have moved on by now, but... as far as I know there's no way to delete a history entry (or state).

One option I've been looking into is to handle the history yourself in JavaScript and use the window.history object as a carrier of sorts.

Basically, when the page first loads you create your custom history object (we'll go with an array here, but use whatever makes sense for your situation), then do your initial pushState. I would pass your custom history object as the state object, as it may come in handy if you also need to handle users navigating away from your app and coming back later.

var myHistory = [];

function pageLoad() {
    window.history.pushState(myHistory, "<name>", "<url>");

    //Load page data.
}

Now when you navigate, you add to your own history object (or don't - the history is now in your hands!) and use replaceState to keep the browser out of the loop.

function nav_to_details() {
    myHistory.push("page_im_on_now");
    window.history.replaceState(myHistory, "<name>", "<url>");

    //Load page data.
}

When the user navigates backwards, they'll be hitting your "base" state (your state object will be null) and you can handle the navigation according to your custom history object. Afterward, you do another pushState.

function on_popState() {
    // Note that some browsers fire popState on initial load,
    // so you should check your state object and handle things accordingly.
    // (I did not do that in these examples!)

    if (myHistory.length > 0) {
        var pg = myHistory.pop();
        window.history.pushState(myHistory, "<name>", "<url>");

        //Load page data for "pg".
    } else {
        //No "history" - let them exit or keep them in the app.
    }
}

The user will never be able to navigate forward using their browser buttons because they are always on the newest page.

From the browser's perspective, every time they go "back", they've immediately pushed forward again.

From the user's perspective, they're able to navigate backwards through the pages but not forward (basically simulating the smartphone "page stack" model).

From the developer's perspective, you now have a high level of control over how the user navigates through your application, while still allowing them to use the familiar navigation buttons on their browser. You can add/remove items from anywhere in the history chain as you please. If you use objects in your history array, you can track extra information about the pages as well (like field contents and whatnot).

You could also extend the idea to handle forward navigation. You would need 3 pages - a "back" handler page, a "forward" handler page, and a "rest" page in between them where the user will typically be. You would then need to traverse back and forth along your history object instead of simply pushing/popping the items.

这篇关于JS - window.history - 删除一个状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！