引用自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. HDU 2024 C语言合法标识符

    http://acm.hdu.edu.cn/showproblem.php?pid=2024 Problem Description 输入一个字符串,判断其是否是C的合法标识符.   Input 输入 ...

  2. mysql 和php 保留2位小数

    一般交易中保留的数字的小数位数为2位(即最小单位为 1分钱[0.01元]) 数据库设计中预金钱有关或要求精准度要高的用 decimal(n,m) 表示,n表示保留的数字长度,保留的小数位数,如deci ...

  3. SQLSERVER安装

    sql server 2008 代理服务提供的凭据无效 sql server 2008 代理服务提供的凭据无效 在Windows Server 2008安装SQL Server 2008出现的问题: ...

  4. 《使用swoole》

    第一 在windows系统搭建swoole环境: 首先,安装cygwin:步骤截图如下 其次,使用cygwin安装swoole: 打开cygwin的终端,进入~目录,并将swoole-src上传到~目 ...

  5. 配置dataimport时候 如果css样式有问题 要修改index和admin的版本号

  6. TM数据

    qatestjr_xuyue10@vipabc.comqatestjr_xuyue01@vipabc.com jrNHc2 jUBRTEqatestjr_nianyue@vipabc.com QE9E ...

  7. echarts之简单的入门——【二】再增加一个柱状图和图例组件

    echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...

  8. aop 记录用户操作(一)

    转载: http://www.cnblogs.com/guokai870510826/p/5981015.html 使用标签来设置需要的记录 实例:@ISystemLog() @Controller ...

  9. GO系列教程

    1.介绍与安装 2.Hello World 3.变量 4. 类型 5.常量 6.函数(Function) 7.包 8.if-else 语句 9.循环 10.switch语句 11.数组和切片 12.可 ...

  10. LightOJ - 1074 Extended Traffic(标记负环)

    题意:有n个城市,每一个城市有一个拥挤度ai,从一个城市u到另一个城市v的时间为:(au-av)^3,存在负环.问从第一个城市到达第k个城市所话的时间,如果不能到达,或者时间小于3输出?否则输出所花的 ...