window.onpopstate事件和history

在支持H5的浏览器中，有一个window.onpopstate事件，该事件可以监听如下操作：

1. 点击浏览器的前进按钮/后退按钮
2. 执行js代码:history.go(n) / history.forward() /

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

 window.addEventListener('popstate', function (e) {
     let goHref = window.location.href;
     console.log('即将跳转目标路径为：', goHref );
     // 走到这一步，页面还没有跳转
});

history.pushState()只会改变当前地址栏的路径，并不会更新页面内容，也就是说，执行下面代码：

window.history.pushState({target:  "mobile"}, "", 'http://www.baidu.com');

地址显示的是http://www.baidu.com，但页面内容依然是原来的内容，并不是百度页面。
还需要注意，当你的url参数是绝地地址的时候，地址栏显示你的绝对地址，当你写的是相对地址的时候，那么相对的就是当前的地址。
比如，当前地址：http://localhost:9090/index.html#/home
你执行：window.history.pushState({target: "mobile"}, "", '#/about');
地址栏显示的是：http://localhost:9090/index.html#/about
不但如此，其实它还改变了历史记录，本来最新的记录是#/home,现在则变成了#/about,虽然页面内容并没有改变。这个历史记录你是可以到浏览器>历史记录中查看到的。
history.replaceState()就是把当前的历史记录改成目标路径，比如：

window.history.replaceState({target:  "mobile"}, "", 'http://www.baidu.com');

这句代码也不会刷新页面，页面内容不变，地址发生了变化，但是如果你再点一次刷新按钮，内容就变成百度了，路径也是和pushstate一样的，唯一不同的就是，它修改的当前历史记录，本来当前历史记录是http://localhost:9090/index.html#/home，现在这条记录的地址变成了http://www.baidu.com。

作者：IamaStupid
链接：https://www.jianshu.com/p/2ad099667327
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。