LuckyWinty / fe-weekly-questions

A pro to record some interview questions every week...
MIT License
341 stars 34 forks source link

实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后 退时正确响应。给出你的技术实现方案? #80

Open LuckyWinty opened 3 years ago

LuckyWinty commented 3 years ago

第一步,通过使用 pushState + ajax 实现浏览器无刷新前进后退,当一次 ajax 调用成功后我们将一 条 state 记录加入到 history 对象中。

第二步,一条 state 记录包含了 url、title 和 content 属性,在 popstate 事件中可以 获取到这个 state 对象,我们可 以使用 content 来传递数据。 第三步,我们通过对 window.onpopstate 事件监听来响应浏览器 的前进后退操作。

使用 pushState 来实现有两个问题,一个是打开首页时没有记录,我们可以使用 replaceState 来将首页的记录替换,另一个问 题是当一个页面刷新的时候,仍然会向服务器端请求数据,因此如果请求的 url 需要后端的配 合将其重定向到一个页面。

更多参考:http://blog.chenxu.me/post/detail?id=ed4f0732-897f-48e4-9d4f-821e82f17fad