您的位置:首页 > Web前端 > JavaScript

利用history对象实现地址栏更新,页面局部刷新

2017-10-10 10:22 711 查看
如今的HTML页面越来越庞大,有时页面只需加载部分的内容,如果为了加载一小部分内容而重新加载整个页面牺牲是非常大。

现解决这种问题的方式多数是使用ajax异步加载数据然后再渲染数据,这样的方式有个缺点就是地址栏不会变动,如果用户在这个时候刷新了页面那么就得重新点击多次才能加载出之前的数据(常见的场景:数据列表分页展示,tab页面切换)。

那么我们可以使用history对象来弥补这个缺陷。

我们可以使用 history.pushState() 方法来实现浏览器地址栏更新。

history.pushState(state, title, url);
state 用于存储一些状态信息,暂时用处不大。

title 可忽略,大多数浏览器并不支持,建议传入null。

url 要添加的url,传入相对路径,url必须和当前url在同一个源下;否则,pushState() 将丢出异常。

使用该方法并不会去加载该url,这样会出现一个问题,当用户在使用浏览器前进后退时候页面也不会重新加载。

解决该问题的方式与代码已上传至GitHub,请自行查阅。
https://github.com/joel-ou/js/blob/master/loader.js
注:浏览器在前进后退页面的时候会恢复到该页面跳转前的位置,如无需该特性可以使用以下方式禁止

history.scrollRestoration = "manual";

浏览器兼容情况请查阅以下资料
https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息