引用自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. 『编程题全队』Beta 阶段冲刺博客二

    1.提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID) (1) 昨天已完成的工作 孙志威: 1.添加了SubTask类,完成基本UI 2.为SubTask类添加了展开/收缩 ...

  2. Node json

    //1:加载相关模块 http express mysqlconst http = require("http");const mysql = require("mysq ...

  3. Oracle面试题(基础篇)

    1. Oracle跟SQL Server 2005的区别? 宏观上: 1). 最大的区别在于平台,oracle可以运行在不同的平台上,sql server只能运行在windows平台上,由于windo ...

  4. shell if [[ ]]和[ ]区别 || &&

    []和test 两者是一样的,在命令行里test expr和[ expr ]的效果相同. test的三个基本作用是判断文件.判断字符串.判断整数.支持使用 ”与或非“ 将表达式连接起来. test中可 ...

  5. MySQL-如何删除hash表分区

    一个大表,之前是以hash分区表的形式存在的, MySQL> show create table history_uint; | history_uint | CREATE TABLE `his ...

  6. C-Lodop获取打印机列表Create_Printer_List

    C-Lodop获取打印机列表Create_Printer_List,此方法Lodop不支持,是C-Lodop特有的函数,客户端本地打印单独用c-lodop,或集中打印等,可以获得本机或云主机的打印机列 ...

  7. Nginx ACCESS阶段 统一的用户权限验证系统

    L59 需要编译到Nginx --with-http_auth_request_module 功能介绍: 主要当收到用户请求的时候 通过反向代理方式生成子请求至上游服务器,如果上游服务器返回2xx 则 ...

  8. Linux 编译命令参数

    基本格式:gcc [options] file1 file2... //若不加入参数,则按默认参数依次执行编译.汇编和链接操作,生成的可执行文件名为 a.out 常用参数:-E //只执行预处理操作 ...

  9. BZOJ2124 等差子序列(树状数组+哈希)

    容易想到一种暴力的做法:枚举中间的位置,设该位置权值为x,如果其两边存在权值关于x对称即合法. 问题是如何快速寻找这个东西是否存在.考虑仅将该位置左边出现的权值标1.那么若在值域上若关于x对称的两权值 ...

  10. 自定义缓存设计(static缓存数据)

    设计题 编程过程中,为了解决缓存数据共享的问题,常常会使用static关键字达到脱离具体实例化对象,在整个java进程生命周期内共享数据的目的.请编写一个类,类名为MapCache,拥有但不局限于以下 ...