使用JavaScript修改浏览器URL地址栏的实现代码【转】
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器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地址栏的实现代码【转】的更多相关文章
- 使用JavaScript修改浏览器URL地址栏的实现代码
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器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检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)
这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放).检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供java ...
随机推荐
- nodefs模块的使用demo
为什么要使用递归?因为stat本身就是一个异步的函数所有存在异步问题不能够进行循环遍历. 在使用该种方法时候需要注意的一点是必须要在箭头标记处进行数据数组的存取.否则会由于异步问题导致输出空或者其他问 ...
- ECSHOP后台登陆后一段时间不操作就超时的解决方法
ECSHOP后台登陆后一段时间不操作就超时的解决方法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2012-05-27 客户生意比较好,因此比较忙,常常不在电脑前 ...
- [转帖]Asp.Net MVC EF各版本区别
Asp.Net MVC EF各版本区别 https://www.cnblogs.com/liangxiaofeng/p/5840754.html 2009年發行ASP.NET MVC 1.0版 201 ...
- linux的LNMP架构介绍、MySQL安装、PHP安装
LNMP架构介绍 和LAMP唯一不同的是,LNMP中的N指的是Nginx(类似于Apache的一种web服务软件).目前这种环境的应用也非常多.Nginx设计的初衷是提供一种快速.高效.多并发的Web ...
- mysql学习笔记二 —— 权限体系
要点: 1.MySQL的API2.MySQL的相关文件3.MySQL的权限体系 1.MySQL的API 应用程序接口 (application program interface) 1.1 命令行中的 ...
- python之Oracle操作(cx_Oracle)
python可通过使用cx_Oracle模块对Oracle数据库进行操作.首先,需要下载cx_Oracle模块,下载地址:https://pypi.python.org/pypi/cx_Oracle/ ...
- LODOP弹出对话框获取保存文件的路径
通常一般不会让用户自己在文本框里填上路径,因为路径要输入字母字符等比较麻烦,而且用户硬盘里文件很多,也不知道要保存在哪里,LODOP可以弹出一个选择保存路径的弹窗,然后把返回选择的路径值.这样用户就可 ...
- 一本通1601【例 5】Banknotes
1601:[例 5]Banknotes 时间限制: 1000 ms 内存限制: 524288 KB [题目描述] 原题来自:POI 2005 Byteotian Bit Bank (B ...
- UI事件
load:在window对象上触发是当页面加载完毕之后触发的,在frameset 是当所有的frames都加载完毕之后触发,当指img标签时,是指图片加载完毕之后等等. unload:在window对 ...
- day11 作用域
返回值可以任何类型,返回可以是函数,返回函数还可以再被调用仅仅返回函数是无法运行的.要运行需要加上()没有返回值的时候,默认返回值为空,None def test1(): print("in ...