现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。

1 var
stateObject = {};
2 var
title =
"Wow Title";
3 var
newUrl =
"/my/awesome/url";
4 history.pushState(stateObject,title,newUrl);

History 对象 pushState() 这个方法有3个参数,你可以从上面的例子看到。第一个参数,是一个Json对象 , 在你储存有关当前URl的任意历史信息.第二个参数,title 就相当于传递一个文档的标题 ,第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。

你要爪子

翻译于 6个月前

4人顶

 翻译的不错哦!

其它翻译版本(1)        
正在加载...

让我们看一个例子,在这个例子中我们将在每个独立的URL中存储一些任意数据。

1 for(i=0;i<5;i++){
2   varstateObject = {id: i};
3   vartitle =
"Wow Title "+i;
4   varnewUrl =
"/my/awesome/url/"+i;
5   history.pushState(stateObject,title,newUrl);
6 }

现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。但是我们怎么重新获得历史状态,并且在此基础上做些事情呢?我们需要对“popstate”添加事件监听器,这将会在每次历史对象的状态改变的时候触发。

01 for(i=0;i<5;i++){
02   varstateObject = {id: i};
03   vartitle =
"Wow Title "+i;
04   varnewUrl =
"/my/awesome/url/"+i;
05   history.pushState(stateObject,title,newUrl);
06   alert(i);
07 }
08   
09 window.addEventListener('popstate',function(event) {
10   readState(event.state);
11 });
12   
13 function
readState(data){
14   alert(data.id);
15 }

现在你会看到无论什么时候你点击返回按钮,一个“popstate”事件就会被触发。我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示“id”的值。

它是非常的简单和有趣,不是吗?

_Luke

翻译于 6个月前

0人顶

 翻译的不错哦!

使用 JavaScript 修改浏览器 URL 地址栏的更多相关文章

  1. 使用JavaScript修改浏览器URL地址栏的实现代码【转】

    引用自http://www.jb51.net/article/42240.htm 现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起 ...

  2. 使用JavaScript 修改浏览器 URL 地址栏

    现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...

  3. 使用JavaScript修改浏览器URL地址栏的实现代码

    现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...

  4. JavaScript 无刷新修改浏览器URL地址栏

    //发现地址栏已改为:newUrlvar stateObject = {}; var title = "Wow Title"; var newUrl = "/my/awe ...

  5. HTML5 修改浏览器url而不刷新页面

    嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Saf ...

  6. javascript/jquery获取url地址栏参数的方法

    简洁jq方法获取url地址栏的参数 function getQueryVariable(variable){ var query = window.location.search.substring( ...

  7. 用JavaScript修改浏览器tab标题

    修改tab或者window的标题,是一项较老的实践.Gmail 用它来提示用户新的聊天消息,当有新的page通过AJAX加载的时候,本站同样用它更新tab title.这是怎样做到的呢?当时是通过设置 ...

  8. js修改浏览器url

    var stateObject = {};var title = "";var newUrl = "/";history.pushState(stateObje ...

  9. JavaScript获得URL地址栏参数防乱码

    JavaScript获得URL地址栏参数防乱码 JavaScript中经常需要解析地址栏中拼接的参数.下面的代码基本是固定的代码,这里摘录下备用. //获得地址栏参数值 function getUrl ...

随机推荐

  1. 学习日记day8:移动端页面流程优化

    一:切图 1:切那些(移动端能不用图片就不用图片:logo单独切因为要带链接) 2:普通切(快捷键:复制到新图层  选中 复制 新建 粘贴 保存)  3:类似切 (选中多个图层  矩形框多选  选择工 ...

  2. maven 启动 报错 Fatal error compiling: 无效的目标发行版

    http://news.tuxi.com.cn/news/119999990123162/31622105.html http://lyking2001.iteye.com/blog/837440 针 ...

  3. 工作流学习——重要概念扫盲篇一步曲 (zhuan)

    http://blog.csdn.net/zwk626542417/article/details/46592471 ***************************************** ...

  4. 解决SQL命令行回退的问题

    场景 在linux或者aix上安装后Oracle后,在SQL命令行下无法通过键盘的退格键回退,如下 解决方法 安装软件 # rpm -ivh rlwrap-0.41-1.el6.x86_64.rpm ...

  5. Hbase之必要时取出请求的行(列族所有数据)

    import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.CellScanner; import org. ...

  6. --tags --follow-tags 的区别

    --tags    All refs under refs/tags are pushed, in addition to refspecs explicitly listed on the comm ...

  7. java 集合(Map)

    -------------------|Map  储存的数据都是以键值对的形式,键不可重复,值可重复. ----------------------------| HashMap ---------- ...

  8. java 多线程4(死锁)

    死锁现象: 死锁原因: 1.存在两个或两个以上的线程. 2.存在两个或两个或两个以上的共享资源. 死锁现象解决的方案: 没有方案只能尽量避免.

  9. arithmetic

    字典序算法 http://www.cnblogs.com/darklights/p/5285598.html 字典排序(lexicographical order)是一种对于随机变量形成序列的排序方法 ...

  10. iOS应用架构谈 本地持久化方案及动态部署

    转载: iOS应用架构谈 本地持久化方案及动态部署 前言 嗯,你们要的大招.跟着这篇文章一起也发布了CTPersistance和CTJSBridge这两个库,希望大家在实际使用的时候如果遇到问题,就给 ...