JS实现点击浏览器自带返回按钮跳转到指定页面

 JS实现点击浏览器自带返回按钮跳转到指定页面.

实例代码一：

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

实例代码二

浏览器返回按钮跳转到指定页面
在使用手机浏览器打开网页时，我们会发现有时候点击浏览器下方的返回按钮，并未返回到首页，而是会跳转到其他页面。
怎么实现呢，下面跟大家简单分享一下：
1、改变浏览器回退的历史记录url地址：
每打开一条地址，浏览器会记录一条历史记录，浏览器回退按钮是读取上一条历史记录的地址并跳转。当只打开一个页面时浏览器返回按钮获取不到上一条历史记录，直接返回首页。（注：这里不考虑部分手机浏览器的无痕浏览设置）
为保证我们打开网页之后，浏览器的历史记录会有多条记录，打开网页时先进行添加历史记录的操作。window的history属性有pushState、replaceState、popstate等方法。通过pushState()方法对浏览器插入历史记录。
history的其他属性方法在此不做介绍，需要用到的道友自己百度哟~~
pushState(state, title, url)：pushState()方法有三个参数，state是数据设置（可通过history.state读取），title是标题（多数浏览器会忽略或不识别这个参数，建议设置为null），url是要插入的记录地址。
示例：
 

 

为保证点击返回按钮时获取的上一条记录是自己添加的，这里插入两条记录，同时为保证插入第一条记录完成状态改变之后才插入第二条记录，这里用setTimeout设置一点延迟。

2、监听浏览器返回按钮事件，触发时修改跳转地址：
当用户在浏览器点击进行后退、前进，或者在js中调用histroy.back()，history.go()，history.forward()等，会触发history的popstate()方法，因此我们要对popstate()方法进行监听。
示例：

function内是触发popstate之后要做的操作，这里直接设置跳转至Ranking.html页面。

完整代码：

onload时插入历史记录，然后进行监听。其他插入历史记录的时机未测试。

ps: 俺在测试过程中发现，在电脑上谷歌浏览器仿移动端模式调试时，pushState()方法基本上都是成功，查看history可以在state中看到插入的数据，但是返回按钮并不会出现（灰色无法点击）。而在控制台console输入history.back()会触发popstate，返回按钮会出现。（小菜鸡不知道是啥原因，各位大佬请原谅~~）
转到手机上测试时基本上都是可以的，苹果、vivo、小米手机自带浏览器可以，谷歌、UC、QQ浏览器也可以，其他未测。