大佬教程收集整理的这篇文章主要介绍了HTML5 History API实现无刷新跳转,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在HTML5中,
通过以上三点,可以实现在不刷新页面的前提下动态改变浏览器地址栏中的URL,动态显示页面内容。
比如: 当页面A和页面B内容不一样的时候,在HTML5之前,如果从页面A切换到页面B时,需要在浏览器下从页面A切换到页面B,或者说,如果需要有后退按钮功 能的话,可以在URL地址加#XXXX 可以实现后退功能。那么现在在HTML5中,可以通过History API实现如下处理即可:
3. 通过History API在不刷新页面的情况下在浏览器的地址栏中从页面A的URL地址切换到页面B的URL地址。
HTML5中的History API
1. history.pushState(data,title [,url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址。
2. history.replaceState(data,url]) :更改当前的历史记录,参数同上。
3. history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样。
4. popstate事件:当用户单击浏览器的后退或者前进按钮时触发该事件。在事件处理函数中读取触发事件的事件对象的state属性值,该属性值即为执行pushState方法时所使用的第一个参数值,其中保存了在向浏览器历史记录中添加记录同步保存的对象。
到目前为止,IE10,firefox4以上的版本,Chrome8以上的版本,Safari5,Opera11以上的版本浏览器@L_489_44@HTML5中的History API。
在ajax给我们带来提高用户体验、减少http连接数等好处的同时,也渐渐显露出一些不足之处,比如:
截图演示如下:
如上面的效果,页面一进来的时候是 index.html 当我点击 测试1 时候 显示测试1中的内容 浏览器地址转到测试1的URL,同理测试2和测试3都一样,接着我们可以通过地址栏中的前进和后退按钮也可以操作。
基本的代码如下:
index.html
<div class="container"> <ul class="list"> <li> <a href="http://localhost/demo/html5/index.PHP">测试1</a> </li> <li> <a href="http://localhost/demo/html5/index2.PHP">测试2</a> </li> <li> <a href="http://localhost/demo/html5/index3.PHP">测试3</a> </li> </ul> <div class="all-content"> <ul class="content"> <li>111</li> <li>222</li> <li>333</li> </ul> </div> </div>
<?PHP $data = json_decode(file_get_contents("PHP://input")); header("Content-Type: application/json; charset=utf-8"); echo ("[{"age" : 24,"sex" : "boy","name" : "huangxueming"},{"age" : 26,"name" : "huangxueming2"}]"); ?>
<?PHP $data = json_decode(file_get_contents("PHP://input")); header("Content-Type: application/json; charset=utf-8"); echo ("[{"age" : 65,"sex" : "boy2","name" : "huangxueming2"},sans-serif; text-indent:2em"> index3.PHP代码输出如下:
<?PHP $data = json_decode(file_get_contents("PHP://input")); header("Content-Type: application/json; charset=utf-8"); echo ("[{"age" : 244,"sex" : "boy4","name" : "huangxueming4"},{"age" : 264,"name" : "huangxueming4"}]"); ?>JS所有的代码如下:
/** * HTML5 history and ajax */ $(function(){ var ajax, currentState; $(".container li").unbind().bind("click",function(E){ e.preventDefault(); var target = e.target, url = $(target).attr("href"); !$(this).hasClass("current") && $(this).addClass("current").siblings().removeClass("current"); if(ajax == undefined) { currentState = { url: document.LOCATIOn.href, title: document.title, html: $(".content").html() }; } ajax = $.ajax({ type:"POST", url: url, dataType:"json", success: function(data){ var html = ""; if(data.length > 0) { for(var i = 0,ilist = data.length; i < ilist; i++) { html += "<li>" +data[i].age+ "</li>" + "<li>" +data[i].name+ "</li>" + "<li>" +data[i].sex+ "</li>"; } $(".content").html(html); } var state = { url: url, title: document.title, html: $(".content").html() }; history.pushState(state,null,url); } }); }); window.addEventListener("popstate",function(event){ if(ajax == null){ return; }else if(event && event.statE){ document.title = event.state.title; $(".content").html(event.state.html); }else{ document.title = currentState.title; $(".content").html(currentState.html); } }); });
以上是大佬教程为你收集整理的HTML5 History API实现无刷新跳转全部内容,希望文章能够帮你解决HTML5 History API实现无刷新跳转所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。