首页 > 代码库 > (一)HTML5 - pushState 无刷新更新地址
(一)HTML5 - pushState 无刷新更新地址
可以解决什么问题:
可以实现网页的ajax加载,同时又能完成URL的改变而没有网页跳转刷新的迹象,就像是改变了网页的hash(#)一样。
优于hash:
避免了改变hash的问题,避免了用户不理解URL的形式感到疑惑,同时还有onpopstate提供监听,良好响应后退前进。而且它不需要这个URL真实存在。
HTML5 的 pushState+Ajax:
pushState() 的基本参数是:
1 var state = ( {2 url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE3 } );4 window.history.pushState(state, ~title, ~href);5 window.history.replaceState( state, ~title, ~href); // 替换
pushState、replaceState 的区别
pushState()可以创建历史,可以配合popstate事件,而replaceState()则是替换掉当前的URL,不会产生历史。
注:
只能用同域的URL替换,例如你不能用http://baidu.com去替换http://google.com。
state对象不存储不可序列化的对象如DOM。
pushState 配合 popstate 监听
1 window.addEventListener(‘popstate‘, function(evt){2 var state = evt.state;3 var tilte = state.tilte ;4 var url = state.url5 document.title=title;6 doSomething(url); // 自定义函数7 }, false);
popstate与hashChange
对于http://www.abc.com/path?search=ghj#hashstring 这个url来说,
① http://为协议
② www.abc.com为host
③ path为path,也就是我们的子目录,每个子目录可以干很多事情
④ #hashstring为hash相关
①-③页面会刷新,④页面不刷新,
pushState与改变hash 相同点:可以改变url地址
pushState与改变hash 不同点:hashChange只能改变hashstring 部分,pushState可改变①-③而不刷新页面
popstate 为1-3环节的变化引起的回调
hashChange 为hash变化引起的回调,是不同的
(一)HTML5 - pushState 无刷新更新地址
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。