利用HTML5新特性改变浏览器地址后不刷新页面
来源:互联网 发布:中国科技大学人工智能 编辑:程序博客网 时间:2024/05/16 01:58
http://www.cnblogs.com/xuchengzone/archive/2013/04/18/html5-history-pushstate.html
作为一个程序员,上GitHub必然是很经常的一件事情。细心的同学会发现当我们在浏览项目源码的时候,进入文件夹后Url地址发生改变后,内容很快就加载好了。起初还以为是刷新了页面加载的,但刷新页面速度也快的离谱了吧。于是F12监控下网络请求,发现是进行了Ajax请求。很是神奇,Url地址发生改变不是会刷新页面吗(#号后面的除外啦)?什么情况?猜想肯定是HTML5这个东东里面的新特性。Google搜索下果然如此,是history.pushState 这个新东西。于是自动动手测试实现起来了。
- 实现效果如图,点击面包屑导航下面的内容进行Ajax加载页面内容。
- MVC页面代码 ,Ajax 请求只是返回一个内容
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render( "~/Content/css" ) @Scripts.Render( "~/bundles/modernizr" )</head><body> <div> <a href="/">首页</a> / <a href="/home/news">公司新闻</a> / <a href="/home/news/1">新品速递</a> </div> <br /> <div id="page"> @RenderBody() </div> @Scripts.Render( "~/bundles/jquery" ) @RenderSection( "scripts", required: false ) <script type="text/javascript"> $(function () { window.onpopstate = function (e) { //点击浏览器的前进后退按钮处理 if (e.state) { document.title = e.state.title; $.ajax({ type: "get", url: e.state.url, success: function (data) { $("#page").html(data) }, error: function (data) { } }) } } //处理点浏览器返回时候最后一个不刷新页面内容问题 var state = { title: document.title, url: document.location.href, otherkey: null }; history.replaceState(state, document.title, document.location.href); $("a").click(function () { var _href = $(this).attr("href"); $.ajax({ type: "get", url: _href, success: function (data) { //加入到历史状态里面 var state = { title: data, url: _href, otherkey: null }; history.pushState(state, data, _href); $("#page").html(data) }, error: function (data) { } }) return false; }) }) </script></body></html>
- 总结:刚查资料看到时候觉得就是调用一个js就可以搞定,但做demo的时候会发现存在一个一个问题,例如:浏览器前进后退时候页面不更新,解决更新后又发现后退到进入的第一个页面时候还是有问题,最后通过
history.replaceState 这个去实现的,从而达到了类似github源码文件加载类似效果。
demo源码下载
- 利用HTML5新特性改变浏览器地址后不刷新页面
- 不刷新页面改变浏览器地址栏
- 页面刷新后不改变滚动条
- HTML5 修改浏览器url而不刷新页面
- 浏览器页面数据保存后不显示,需要重新刷新页面才能正常显示的解决方法
- html5 新特性支持的浏览器检测
- html5 新特性支持的浏览器检测
- html5 检测浏览器是否支持新特性
- HTML5,修改浏览器地址栏的URIL而不刷新页面代码
- 不刷新页面改变下拉菜单内容
- 不刷新页面改变下拉菜单内容
- 不刷新页面改变下拉菜单内容
- 页面刷新不改变隐藏域内容
- js不刷新页面,改变url
- HTML5 不刷新页面修改地址栏
- spring jquery Mobile 页面跳转后浏览器url未改变&&javaScript代码刷新后才能执行的问题解决
- Struts2页面资源路径修改后还是不改变,Ctrl+shift+delete浏览器缓存删除即可。
- 【BUG】---ionic tab-demo项目在modal页跳转URL改变页面不刷新,手动刷新后显示空白
- SQLite操作语句
- 学习SVN版本控制与恢复删除
- http://blog.chinaunix.net/uid-25737580-id-3182286.html
- 第七章 数据字典
- mmap拷贝文件
- 利用HTML5新特性改变浏览器地址后不刷新页面
- [转] 寒门再难出贵子
- hdu 1251 字典树
- PHPDocumentor安装与使用
- Android学习-各种对话框
- rsync+inotify实现实时同步
- Hibernate主键生成策略
- Iframe不能解析mht格式文件
- 网络编程1 -----获取本机IP地址