无刷新修改页面的浏览器地址栏显示地址的方法
作为一个Web程序员,我经常会到网上去看别人是如何做网站,如何开发Web应用的。这样的好处有很多,一是开阔你的眼界,你能看到很多书本上没有的东西,二是看别人的代码是如何写的,取人之长、补己之短。像纯CSS3实现光芒旋转四射的头像动画和用CSS制作出绚丽燃烧的火狐狸的方法都是研究别人网站上的技术的收获。
经常访问Facebook,或github.com,或plus.google.com的人会发现,它们翻页时页面并不是全部刷新,只有中间文章部分刷新,而页面头和页面侧边栏不刷新。首先我们要理解为什么它们要这样做,这样做有什么好处。
通常的网站页面都有一个规律,比如我们的WebHek网站,左侧的内容以及页面头部的logo和菜单部分在各个页面上都是一样的,只有中间文章部分的内容会变化。传统的页面里,用户访问每个页面时,这些永远不变的部分会反复重复重新加载——其实完全没必要,既浪费流量资源,又影响页面加载速度,我们真正需要它们只加载一次就行了。
当然,有经验的Web程序员已经说出来了,用Ajax动态加载有变化的部分。当用户点击“下一页”时,我们不是真的翻到下一页,而是后台用Ajax把新内容的HTML拉取到客户端,然后删掉原来的内容部分,填充进新拉取的内容。整个效果跟传统的翻页效果一样,但速度更快,更节省资源,而且可以添加一些特性,比如淡入淡出。
但现在有了另外一个问题。在传统的翻页过程中,你可以看到浏览器的地址栏是相应会变化的,会显示当前页面地址,用户可以拷贝这个地址或加入书签或分享给好友。而Ajax实现的翻页地址栏是没有变化的。还有,在传统的翻页过程中,当用户点击“后退”按钮时,浏览器会从缓存里读取前一页,迅速的显示给用户。而Ajax实现的翻页中,用户点击“后退”按钮时,不知道会后退到哪里,因为页面的地址没有变化,window.history
里没有存储任何“前一页”的信息。
前面说了这么多,下面才是本文的重点,如何在不刷新页面的情况下修改页面的URL。也就是,如何既能实现用Ajax加载页面实现翻页,又能让浏览器记录翻页地址历史信息。
程序手工存储window.history
信息
function processAjaxData(answer, url){document.getElementById("mycontainer").innerHTML = answer.html;document.title = answer.pageTitle;window.history.pushState({"html":answer.html,"pageTitle":answer.pageTitle},"", url);}
answer.html
是我们用Ajax在后台拉取的新页面内容,用它替换了页面上的原内容,并且修改了页面标题。最后一步最重要,把页面信息pushState
到window.history
里。
而当有浏览者点击浏览器“后退”或“前进”按钮时,我们用下面的代码来响应用户的操作:
window.onpopstate = function(event){if(event.state){document.getElementById("mycontainer").innerHTML = event.state.html;document.title = event.state.pageTitle;} };
谷歌浏览器,火狐浏览器,Safafi浏览器、IE10+等现代浏览器都支持这种技术,你也试试吧。
无刷新修改页面的浏览器地址栏显示地址的方法相关推荐
- ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
- Php无刷新修改url,history 实现无刷新更改url和页面内容
在访问google plus 和网易m站时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强 ...
- 快速修改HTML5,HTML5无刷新修改URL(示例代码)
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- HTML5网页页面无刷新更新页面URL
HTML5可通过history.pushState修改网页的URL地址,在配合相关代码显示隐藏相应界面便可以实现单页面多界面相互操作.该方法比直接访问URL地址速度快,执行效率高,UI体验好,但会增加 ...
- jquery 当页面图片加载之后_在浏览器地址栏输入地址到页面渲染完成发生了什么?(下)...
上一篇讲了前三步,本篇从第四步开始.下面是正文: 四.进行tcp三次握手,建立tcp连接. 简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址.此时浏览器就会请求和服务器连接,用来传输 ...
- 后端数据成功返回 页面不渲染_在浏览器地址栏输入地址到页面渲染完成发生了什么?(下)...
上一篇讲了前三步,本篇从第四步开始.下面是正文: 四.进行tcp三次握手,建立tcp连接. 简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址.此时浏览器就会请求和服务器连接,用来传输 ...
- 使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的 ...
- 无刷新跳转—关于history中pushState和replaceState方法详解
〝 古人学问遗无力,少壮功夫老始成 〞 **关于history中pushState和replaceState方法详解,**常码字不易,出精品更难,没有特别幸运,那么请先特别努力,别因为懒惰而失败,还矫 ...
最新文章
- mybatis mysql 分表_Mybatis的分表实战
- H5开发 连接蓝牙打印机 打印标签(斑马ZR628)
- 疯狂了!当游戏爱上MongoDB会怎么样???
- mongoDB操作详细
- 暑期训练日志----2018.8.24
- 如何通过JMX远程监控Solr?
- 嵌套点击事件只执行第一次
- Apple分区总体布局结构
- JS判断浏览器类型与版本
- 亿图图示+linux版本,亿图图示linux版下载
- 旅游网页设计 web前端大作业 全球旅游私人订制 旅游公司网站模板(HTML+CSS+JavaScript)
- C 和 Java 没那么香了,Serverless 时代 Rust 即将称王?
- XMAN misc writeup
- 计算机瑞士留学经验,瑞士留学生活分享
- STM32F103C8T6实现LED闪烁
- 如何调整word分栏后,左右不平齐的现象
- Django 1.4 Python 2.7菜鸟入门
- 利用switch实现春夏秋冬
- 14.1 常见数据结构、List集合(ArrayList、LinkedList)、Set集合(HashSet、LinkedHashSet)、可变参数方法
- arduino 计时器和中断
热门文章
- dd linux 尾部添加0_Linux 下的dd命令使用详解(摘录)
- Rust actix aiohttp_【Rust架构】Rust web框架比较
- 根据UTC和经纬度计算当地年份、季节、时区等的时间类工具
- Excel文档打开显示只读,如何取消只读功能?
- 人像调色,教大家调素系风格调色教程
- 【cofface作品】中兴U880 recovery 5.0.2.8中文版
- Homekit智能家居系列一智能触摸面板开关
- vue中的动画效果与过渡效果
- phpcms v9 表单向导 在线留言后,发送邮件(含留言内容)
- javaweb项目报错:org.apache.jasper.JasperException: 无法为JSP编译类