看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚
自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过ajax请求获取数据达到异步更新视图的按钮,原理的实现由两种,
其一,通过hash值的变化,绑定onhashchange的回调函数更新视图,因为hash值的变化不会让页面失去响应,不会向服务器发送请求。下面列出几种可能改变hash值的方法,改变url中的hash。浏览器回退按钮可能出现历史记录中的url包含的hash值不一样,都将触发该事件;还有触发带瑁点的链接改变,再通过js直接获取location.hash来改变导致事件触发。
其二,通过同H5 historyAPI 来添加向浏览器的历史栈中添加记录。过去的方法只有通过back,forward,go三个方法来实现前进后退和跳转。到H5多了pushState,replaceState方法。pushState只是单纯的添加并不跳转到该记录,而replaceState,替换记录整个历史记录的length长度不变化。 hitstory.pushState(data,title,url),向url里写入第一个参数数据,并指定title的值。执行完历史栈中添加了一条记录,通过执行一次popstate事件其中popstate用来监听历史记录的变化,可以理解为监听浏览器后退、前进的操作。绑定onpopstate事件后执行location.reload(); 因为兼容性问题,History.js用于修补。
原文地址:https://www.cnblogs.com/blackcoding/p/9741988.html
时间: 2024-10-10 22:32:51