如何实现像浏览器一样的来回功能

how to implement back and forward functionality like browser

本文关键字：一样 功能 浏览器 何实现 实现      更新时间：2023-09-26

我想在我的项目中实现像浏览器一样的来回功能，就像我们有屏幕的网页一样。我所尝试的是初始设置currentscreenindex=-1

，当第一个屏幕的数据出现时，执行这个函数

In screen data arrive function (){
   this.currentscreenindex++; 
   this.screenvisited[this.currentscreenindex]=data;
}

这是我尝试的back函数:

back(){
    currentscreenindex--;
    var screen=screenvisited[currentscreenindex];
    // will go to this screen
}

但是我的问题是:

                    currentscreenindex  screen data in screenvisted array
When 1st screen arrived     0     Data of 1st screen 
When 2st screen arrived     1     Data of 2st screen 
When 3st screen arrived     2     Data of 3st screen 
When 4st screen arrived     3     Data of 4st screen 
When 5st screen arrived     4     Data of 5st screen 
when user click back button 3     call the screen is set to 4th gib,

所以当第4个屏幕的数据到达时，当前索引将被增加，因此currentindex=4和当前索引4的数据将是第4个屏幕，我认为这是不正确的，因为如果currentindex=4的数据将被改变，那么我就无法向前执行，如果是，请告诉我如何纠正它?

请建议我如何写适当的返回和转发功能做相同的功能浏览器。

我不知道你将如何适应你目前的做法，但你可以实现这样的功能:

你有两个堆栈。一个后栈和一个下栈。它们一开始都是空的。当用户通过链接或除后退/前进之外的其他导航方法导航到新页面时，清除下一个堆栈，将当前页面添加到后退堆栈，然后继续导航。当用户单击返回时，将当前页面推入前向堆栈，从后向堆栈弹出一个页面，然后导航到弹出的页面。当用户单击前进时，将当前页面推到后堆栈，从前堆栈弹出页面，并导航到弹出的页面。

编辑:你要求一些伪代码，所以给你:

var currentPage=null;
var backStack=[];
var forwardStack=[];
function navigate(newPage) {
    currentPage=newPage;
    // stub
}
function linkClicked(page) {
    backStack.push(currentPage);
    forwardStack=[];
    navigate(page);
}
function goBack() {
    forwardStack.push(currentPage);
    navigate(backStack.pop());
}
function goForward() {
    backStack.push(currentPage);
    navigate(forwardStack.pop());
}

这个简单的解决方案如何:

back(){
    currentscreenindex-=2;
    var screen=screenvisited[currentscreenindex+1];
    // will go to this screen
}

然后，当"屏幕"被加载时，它会将currentscreenindex增加1，从而得到currentscreenindex - 2 + 1——正是您需要的。

你应该有两个数字:lastScreenInHistory, currentScreen。

  1. 初始化为-1

  2. 新屏幕到达:
    lastScreenInHistory = ++currentScreen;this.screenvisited[this.lastScreenInHistory]=data;

  3. On Back: if( currentScreen > 0 ) --currentScreen;

  4. On Forward: if( currentScreen < lastScreenInHistory ) ++currentScreen;

  5. 如果相应的if语句表达式为真，则应启用相应的按钮。

在后退和前进之后，您应该从screenvisited在索引currentScreen处加载屏幕。

相关文章：