相关文档:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulatingthebrowser_history
实现目标
- 页面的跳转(前进后退,点击等)不重新请求页面
- 页面URL与页面展现内容一致(符合人们对传统网页的认识)
- 在不支持的浏览器下降级成传统网页的方式
使用到的API
history.state
当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。
history.pushState(state, title, url)
将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。
state:与要跳转到的URL对应的状态信息。
title:不知道干啥用,传空字符串就行了。
url:要跳转到的URL地址,不能跨域。
history.replaceState
用新的state和URL替换当前。不会造成页面刷新。
state:与要跳转到的URL对应的状态信息。
title:不知道干啥用,传空字符串就行了。
url:要跳转到的URL地址,不能跨域。
window.onpopstate
history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。
支持性判断
if ('pushState' in history) {...}
实现思路
用户通过“点击触发”,“操作历史”,“直接访问URL”的方式修改当前URL。这三种触发方式会使浏览器做出不同的行为。如果页面做无刷跳转,那么页面具体显示什么内容需要js来控制,js则需要根据一些信息来知道当前应该显示什么内容,这个信息就是history.state。这样我们只要保持URL和history.state一一对应,就能保证URL和内容一一对应。大部分情况下URL和history.state都是一一对应的,但通过直接URL访问页面的方式进入页面,history.state是null,所以我们需要把URL转换成对应的history.state写入。我们不能直接写入history.state,需要通过replaceState的方式写入。对于不支持pushstate的浏览器,一律修改href跳转页面,等同于直接访问URL。示意图如下。
相关推荐
pushState()有三个参数:一个状态对象、一个标题(现在会被忽略),一个可选的URL地址。 state:与要跳转到的URL对应的状态信息。 title:空字符串(以后可能有用)。 url:要跳转到的URL地址,不能跨域。 作用:...
pjax是对ajax pushState的封装,让你可以很方便的使用pushState技术
pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。 同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。 并且展现方式支持动画技术,可以使用系统自带的动画方式,也...
主要介绍了使用ajax和history.pushState无刷新改变页面URL示例,需要的朋友可以参考下
推送状态服务器 与HTML5 Pushstate一起使用的静态文件服务器。...npm install pushstate-server --save 用法 var server = require ( 'pushstate-server' ) ; server . start ( { port : 3000 , d
pjax (ajax + pushState的封装) 无刷新翻页等.zip
ajax与HTML5 history pushState:replaceState实例1
history.pushState 和 history.replaceState 可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了。 虽然各种HTML5文档说 [removed] 事件可以拦截 pushState 的消息,但在实际的...
二、pushState() 方法的例子 假设在 http://mozilla.org/foo.html 中执行了以下 JavaScript 代码: var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html"); 这将使浏览器地址栏显示为 ...
vue-routerHTML5 History 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...] }) 当你使用 history 模式时,URL...
是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容,在页面加载的时候,使用...插件中使用pushState方法来管理浏览器的浏览历史,需要的朋友可以参考下
BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副...
Query插件pjax,修改pjax再次请求的时候部分js没有加载,它通过ajax和pushState技术提供了极速的(无刷新ajax加载)
主要介绍了详解vue填坑之解决部分浏览器不支持pushState方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
ZKTeco 门禁安防设备对接二次开发协议文档
pjax 是一个 jQuery 插件,它使用 ajax 和 pushState 来提供具有真实永久链接、页面标题和工作后退按钮的快速浏览体验。 pjax 的工作原理是通过 ajax 从您的服务器获取 HTML,并用加载的 HTML 替换页面上容器元素的...
jquery-pjaxr 是一个插件,它使用 ajax 和 pushState 来提供快速浏览体验。 它能够用完整的后退功能替换多个容器和不同的头部标签。 对于 pjaxr 的完全降级。 终于发布了 1.2 版,但还有很多工作要做,目前我没有...