在支持H5的浏览器中,有一个window.onpopstate事件,该事件可以监听如下操作:
- 点击浏览器的前进按钮/后退按钮
- 执行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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 标签:http,地址,window,onpopstate,浏览器,history,页面 From: https://www.cnblogs.com/chinasoft/p/17106700.html