使用 JavaScript 修改浏览器 URL 地址栏
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。
History 对象 pushState() 这个方法有3个参数,你可以从上面的例子看到。第一个参数,是一个Json对象 , 在你储存有关当前URl的任意历史信息.第二个参数,title 就相当于传递一个文档的标题 ,第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。 |
![]() 你要爪子
4人顶 顶 翻译的不错哦! |
||||||||
其它翻译版本(1) |

让我们看一个例子,在这个例子中我们将在每个独立的URL中存储一些任意数据。
现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。但是我们怎么重新获得历史状态,并且在此基础上做些事情呢?我们需要对“popstate”添加事件监听器,这将会在每次历史对象的状态改变的时候触发。
现在你会看到无论什么时候你点击返回按钮,一个“popstate”事件就会被触发。我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示“id”的值。 它是非常的简单和有趣,不是吗? |
![]() _Luke
0人顶 顶 翻译的不错哦! |
||||||||||||||||||||||||||||||||||||||||||
使用 JavaScript 修改浏览器 URL 地址栏的更多相关文章
- 使用JavaScript修改浏览器URL地址栏的实现代码【转】
引用自http://www.jb51.net/article/42240.htm 现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起 ...
- 使用JavaScript 修改浏览器 URL 地址栏
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...
- 使用JavaScript修改浏览器URL地址栏的实现代码
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...
- JavaScript 无刷新修改浏览器URL地址栏
//发现地址栏已改为:newUrlvar stateObject = {}; var title = "Wow Title"; var newUrl = "/my/awe ...
- HTML5 修改浏览器url而不刷新页面
嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Saf ...
- javascript/jquery获取url地址栏参数的方法
简洁jq方法获取url地址栏的参数 function getQueryVariable(variable){ var query = window.location.search.substring( ...
- 用JavaScript修改浏览器tab标题
修改tab或者window的标题,是一项较老的实践.Gmail 用它来提示用户新的聊天消息,当有新的page通过AJAX加载的时候,本站同样用它更新tab title.这是怎样做到的呢?当时是通过设置 ...
- js修改浏览器url
var stateObject = {};var title = "";var newUrl = "/";history.pushState(stateObje ...
- JavaScript获得URL地址栏参数防乱码
JavaScript获得URL地址栏参数防乱码 JavaScript中经常需要解析地址栏中拼接的参数.下面的代码基本是固定的代码,这里摘录下备用. //获得地址栏参数值 function getUrl ...
随机推荐
- 学习日记day8:移动端页面流程优化
一:切图 1:切那些(移动端能不用图片就不用图片:logo单独切因为要带链接) 2:普通切(快捷键:复制到新图层 选中 复制 新建 粘贴 保存) 3:类似切 (选中多个图层 矩形框多选 选择工 ...
- maven 启动 报错 Fatal error compiling: 无效的目标发行版
http://news.tuxi.com.cn/news/119999990123162/31622105.html http://lyking2001.iteye.com/blog/837440 针 ...
- 工作流学习——重要概念扫盲篇一步曲 (zhuan)
http://blog.csdn.net/zwk626542417/article/details/46592471 ***************************************** ...
- 解决SQL命令行回退的问题
场景 在linux或者aix上安装后Oracle后,在SQL命令行下无法通过键盘的退格键回退,如下 解决方法 安装软件 # rpm -ivh rlwrap-0.41-1.el6.x86_64.rpm ...
- Hbase之必要时取出请求的行(列族所有数据)
import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.CellScanner; import org. ...
- --tags --follow-tags 的区别
--tags All refs under refs/tags are pushed, in addition to refspecs explicitly listed on the comm ...
- java 集合(Map)
-------------------|Map 储存的数据都是以键值对的形式,键不可重复,值可重复. ----------------------------| HashMap ---------- ...
- java 多线程4(死锁)
死锁现象: 死锁原因: 1.存在两个或两个以上的线程. 2.存在两个或两个或两个以上的共享资源. 死锁现象解决的方案: 没有方案只能尽量避免.
- arithmetic
字典序算法 http://www.cnblogs.com/darklights/p/5285598.html 字典排序(lexicographical order)是一种对于随机变量形成序列的排序方法 ...
- iOS应用架构谈 本地持久化方案及动态部署
转载: iOS应用架构谈 本地持久化方案及动态部署 前言 嗯,你们要的大招.跟着这篇文章一起也发布了CTPersistance和CTJSBridge这两个库,希望大家在实际使用的时候如果遇到问题,就给 ...