引用自http://www.jb51.net/article/42240.htm

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

<button onclick="justUrlChange()">点击-循环改变URL地址,但并不和后台交互</button>
<script type="text/javascript"> function justUrlChange(){
for(i=0;i<5;i++){
var j = i+10;
var stateObject = {id: j};//json格式
var title = "Wow Title "+i;
var newUrl = "/SpringMVC/teacher/inWhichRoom.do?id="+i;
history.pushState(stateObject,title,newUrl);
/* 第一个参数,是一个Json对象 , 在你储存有关当前URl的任意历史信息.
第二个参数,title 就相当于传递一个文档的标题 .
第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。 */
}
} /* 现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。
对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。
但是我们怎么重新获得历史状态,并且在此基础上做些事情呢?
我们需要对“popstate”添加事件监听器,这将会在每次历史对象的状态改变的时候触发。 */
window.addEventListener('popstate', function(event) {//给浏览器添加 "返回" 监听事件,且popstate必须小写
readState(event.state);//弹出的都是j的信息
}); /* 现在你会看到无论什么时候你点击返回按钮,
一个popstate事件就会被触发。
我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示id的值 */
function readState(data){
alert(data.id);
}
</script>

使用JavaScript修改浏览器URL地址栏的实现代码【转】的更多相关文章

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

    现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器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检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)

    这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放).检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供java ...

随机推荐

  1. 实验十一 团队作业7—团队项目设计完善&编码测试

    实验十一 团队作业7—团队项目设计完善&编码测试 实验时间 2018-6-8 Deadline: 2018-6-20 10:00,以团队随笔博文提交至班级博客的时间为准. 评分标准: 按时交 ...

  2. Beta冲刺随笔汇总

    项目Beta冲刺(团队) Beta冲刺随笔汇总 姓名 学号 博客链接 何守成 031602408 http://www.cnblogs.com/heshoucheng/ 黄锦峰 031602411 h ...

  3. Web接口测试-HttpClient

    要实现Web接口测试的自动化有许多方式,比如利用Jmeter.Loadrunner等测试工具都能够实现接口的自动化测试,我们也可以利用一些开源的框架来实现接口的自动化测试,比如我们现在要说的这个Htt ...

  4. jmeter 使用csv文件 注意项

    1.首先在jmeter 中导入csv文件时我们程序并不知道csv文件中有多少行 : >1.获取的时候 使用 循环控制器来获取csv文件中的所有数据 : 通过 ${__jexl3("${ ...

  5. Oracle 使用PDB 的情况下进行备份恢复的使用.

    1. 关于directory: pdb 需要在container 上面创建directory才可以使用 CDB里面创建的directory是会无反应. 在PDB 里面创建: cmd 之后运行 set ...

  6. 无法定位程序输入点 zend_empty_string php7.dll

    phpstudy 在安装php_redis.dll php_redis.pdb 时,需要用到php_igbinary.dll扩展.但我下载的版本不对.下载的是7.2版本的. 所以报以上错误.可选择版本 ...

  7. Bootstrap插件概述

    前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...

  8. python---random模块详解

    在python中用于生成随机数的模块是random,在使用前需要import, 下面看下它的用法. random.random random.random()用于生成一个0到1的随机符点数: 0 &l ...

  9. mvc Filters 过滤器

    项目需要控制controller和action的访问权限. 看了下资料,发觉还是很方便的. 首先在mvc项目下创建一个文件夹 Filters, 然后在Filters中创建一个类.代码如下 namesp ...

  10. 自学Python2.10-跳出循环(break、continue)

    自学Python之路 自学Python2.10-跳出循环(break.continue) 1.跳出循环break, 跳出同层的循环 break语句可以跳出for和while的循环体. 如果你从for或 ...