(一)HTML5 - pushState 无刷新更新地址

王朝学院·作者佚名  2016-05-22
窄屏简体版  字體: 小  |  中  |  大  |  超大  

(一)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变化引起的回调,是不同的

实例应用 - 劫持后退按钮

(function(window, location) {history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");history.pushState(null, document.title, location.pathname);window.addEventListener("popstate", function() {if(location.hash === "#!/stealingyourhistory") {history.replaceState(null, document.title, location.pathname);setTimeout(function(){location.replace("http://www.baidu.com/");},0); } }, false); }(window, location));

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航