广州市外贸网站建设企业,wordpress shop主题,直接做的视频网站,wordpress怎么修改固定链接更多内容#xff0c;访问:
history hash 单页面应用和多页面应用 React-Router源码分析-History库 History库源码分析-Action 动作类型 History库源码分析-createLocation History库源码分析-createPath History库源码分析-parsePath
history 浏览器历史记录对象
属性:
le…更多内容访问:
history hash 单页面应用和多页面应用 React-Router源码分析-History库 History库源码分析-Action 动作类型 History库源码分析-createLocation History库源码分析-createPath History库源码分析-parsePath
history 浏览器历史记录对象
属性:
length: 历史记录对象长度
方法: go(n): 跳转到相应的历史记录以当前历史记录为标准线0回到之前历史记录为负值比如回到上一页n就是-1向后就是正值如果n 0相当于刷新当前页面。 back(): 回到上一页相当于浏览器后退按钮也可以用go(-1)实现 forward(): 前进到下一页相当于浏览器前进按钮也可以用go(1)实现
HTML5 对 History API 新增的两个方法pushState()、replaceState()均具有操纵浏览器历史记录的能力 history.pushState(state, title, url) state用于存储该 url 对应的状态对象可以通过 history.state 获取title标题目前浏览器并不支持url定义新的历史 url 记录需要注意新的 url 必须与当前 url 同源不能跨域 pushState 函数会向浏览器的历史记录中添加一条history.length 的值会 1当前浏览器的 url 变成了新的 url。需要注意的是仅仅将浏览器的 url 变成了新的 url页面不会加载、刷新。 replaceState: replaceState 的使用与 pushState 非常相似都是改变当前的 URL页面不刷新。区别在于 replaceState 是修改了当前的历史记录项而不是新建一个history.length 的值保持不变。
监听事件 1. popstate事件
每当history对象出现变化时就会触发popstate事件。
通过 a 标签或者 window.location 进行页面跳转时都会触发 window.onload 事件页面完成渲染。点击浏览器的后退键或前进键根据浏览器的不同机制也会重新加载Chrome 浏览器或保留之前的页面Safari 浏览器。而对于通过 history.pushState() 或 history.replaceState() 改变的历史记录点击浏览器的后退键或前进键页面是没有反应的那该如何控制页面渲染呢为了配合 history.pushState() 或 history.replaceState()HTML5 还新增了一个事件用于监听 URL 历史记录改变window.onpopstate()。
注意事项 仅仅调用pushState()方法或replaceState()方法 并不会触发该事件; 只有用户点击浏览器倒退按钮和前进按钮或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发 单纯的a标签不会触发 另外上面浏览器回退和前进事件只针对同一个文档如果浏览历史的切换导致加载不同的文档该事件也不会触发。页面第一次加载的时候浏览器不会触发popstate事件。使用的时候可以为popstate事件指定回调函数回调函数的参数是一个 event 事件对象它的 state 属性指向当前的 state 对象
2. hashchange事件
每当hash值发生变化时就会触发hashchange事件hash值的变化也会触发popstate事件
注意事项: 仅仅调用pushState()方法或replaceState()方法 并不会触发该事件; 另外上面浏览器回退和前进事件只针对同一个文档如果浏览历史的切换导致加载不同的文档该事件也不会触发。页面第一次加载的时候浏览器不会触发hashchange事件。使用的时候可以为hashchange事件指定回调函数回调函数的参数是一个 event 事件对象它的 state 属性指向当前的 state 对象。
