大佬教程收集整理的这篇文章主要介绍了html5 history新特性精简易懂介绍,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
由于我刚刚写博客没有多久,写博客的技术还不是很强,在一些方面可能写的不是特别到位,如果你有什么疑问或者有什么没讲,可以在底下留言,我都会一一回复的~~
一 history和ajax无刷新操作
利用HTML5 History API可以实现页面的无刷新跳转,而在以前是没有技术可以达到这点的,Ajax虽然可以实现页面的无刷新操作,但是分页时URL地址并不会改变,不利于搜索引擎优化,并且不能使用前进和后退按钮,而在H5 history的新特性里解决了这些问题.
如果不想用浏览器的前进和后退也可以用js来操作.
history.BACk() //回退
history.forWARD() //前进
history.go(n) //前进或者后退n步 正数表示前进 负数表示倒退
history.length //历史记录条数
旧版本里可以进行前进和后退,但这只是在现有的 url上进行前进和后退不能改变URL地址,可以用window.LOCATIOn.href改变地址但是页面会被刷新.
三 HTML5 history新特性
HTML5在原有的基础上新加了这些特性
(1)pushState(data,title,url) //追加一条历史记录
data: 用于存储自定义数据,通常设为null
url: 以当前域为基础增加一条历史记录,不可跨域设置
(2)replaceState(data,url)与pushState基本相同,不同之处在于replaceState()只是替换当前url,不会增加或减少历史记录
应用场景:Single Page Application
pushState()添加历史记录示例
<input type="button" @H_616_158@id="btn" @H_616_158@value="看地址变没变"> script // 1、pushState可以往历史记录添加一条记录 var btn = document.getElementById('btn'); // 可以添加新记录 btn.onclick = function () { // 第一个参数,代表我们自定义一些数据,可传可不传,不传给null // 第2个代表示网页的title,所有浏览器基本都忽略 // 第3个参数表示新追加的历史记录 history@H_675_250@pushState(null,'text''/test.html' } </>
现在可以追加历史记录,追加成功后是否有回调呢?,我们可以通过onpostate事件,当前进或后退时触发,通过事件对象ev.state可以读取到存储的数据
监听的对象不是history是要给window哦
// 新增一条记录 // 我们自定义的数据,只对新增的相对应的历史起作用({key: '123'},146)">'标题变没变 } // 监听历史的变化 只有在点后退/前进时调用 window@H_675_250@onpopstate (state) { console@H_675_250@log); } >
要想对特定的URL地址去做特殊处理的情况下,可以给对应的历史记录加数据
连接服务器,实现效果
后退
这样就看到了传递的值的信息
以上是大佬教程为你收集整理的html5 history新特性精简易懂介绍全部内容,希望文章能够帮你解决html5 history新特性精简易懂介绍所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。