前端：APP/浏览器按返回键回到指定页面

待我称王封你为后i 2022-05-20 22:37 144阅读 0赞

项目APP基于Cordova实现，有一个表单提交，但是不想有返回键能回到表单提交页面，所以，想要返回键返回时回到首页。

实现原理：  
利用HTML5 的window.history对象实现对历史记录的访问

实现代码：

#### 一,在需求页面之前的页面修改历史记录 ####

function pushHistory() {
       window.history.pushState({}, "index", "index.html");
    }
    
    pushHistory();

![这里写图片描述][70]

#### 二,在需求页的页面修改历史记录 ####

这个方法与之前的方法不同的地方是就在当前页面写代码

//该方法修改地址后，会变成order#
    //此时返回是变成order.html
    //但是，执行了一次popstate
    //我们通过捕捉这个popstate完成手动跳转
     function pushHistory() { 
           window.history.pushState({}, "index", "#");
                            }
    
    
    
    //执行代码
    pushHistory();
    //添加监听事件，监听后退，前进
    window.addEventListener("popstate", function (e) { 
          window.location.href = "index.html";
    }, false);

![这里写图片描述][70 1]

#### 三.pushState介绍 ####

HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。

这些方法可以协同window.onpopstate事件一起工作。

方法：修改网站路径并创建新的历史记录

history.pushState(state, "title", "url");

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>状态对象（state object）</td> 
   <td align="center">一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。任何可序列化的对象都可以被当做状态对象。</td> 
  </tr> 
  <tr> 
   <td>标题（title）</td> 
   <td align="center">FireFox浏览器目前会忽略该参数，但是我们不能保证以后是否会被用到。</td> 
  </tr> 
  <tr> 
   <td>地址（URL）</td> 
   <td align="center">新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，可以理解为当前地址被更改，不指定的话则为文档当前URL</td> 
  </tr> 
 </tbody> 
</table>

**1.参数URL必须和当前URL同源**  
**2.修改网站路径但不操作**

#### 四.popstate事件 ####

调用history.back()、history.forward()、history.go()等方法，会触发popstate事件，单纯调用pushState()或replaceState()不触发popstate事件。  
　　  
　　访问事件的state属性可获取当初pushState()或replaceState()设置的状态数据。

*  history.back()和history.forward()　：　分别表示向后一页和向前一页。
 *  history.go(num)　：　表示向前或向后翻多少页，num为正数表示向前翻，为负数则向后翻。
 *  History.back()　：　等价于history.go(-1)，history.forward()等价于history.go(1)。

#### 五.总结 ####

对于这些也是在项目需求的时候上网找的资料，本身没有很深入的研究，只是将其实现，在代码上可能存在一定的缺陷。

参考：  
[https://www.jb51.net/article/82673.htm\#][https_www.jb51.net_article_82673.htm]

[70]: /images/20220521/73eb6d7bf24440e69cd9a2dce8fb1b1d.png
[70 1]: /images/20220521/375f52e87cc3454cacacb15d499b61db.png
[https_www.jb51.net_article_82673.htm]: https://www.jb51.net/article/82673.htm#