使用JavaScript修改浏览器URL地址栏的实现代码
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。
var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);
History 对象 pushState() 这个方法有3个参数,你可以从上面的例子看到。第一个参数,是一个Json对象 , 在你储存有关当前URl的任意历史信息.第二个参数,title 就相当于传递一个文档的标题 ,第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。
让我们看一个例子,在这个例子中我们将在每个独立的URL中存储一些任意数据。
for(i=0;i<5;i++){
var stateObject = {id: i};
var title = "Wow Title "+i;
var newUrl = "/my/awesome/url/"+i;
history.pushState(stateObject,title,newUrl);
}
现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。但是我们怎么重新获得历史状态,并且在此基础上做些事情呢?我们需要对“popstate”添加事件监听器,这将会在每次历史对象的状态改变的时候触发。
for(i=0;i<5;i++){
var stateObject = {id: i};
var title = "Wow Title "+i;
var newUrl = "/my/awesome/url/"+i;
history.pushState(stateObject,title,newUrl);
alert(i);
} window.addEventListener('popstate', function(event) {
readState(event.state);
}); function readState(data){
alert(data.id);
}
现在你会看到无论什么时候你点击返回按钮,一个“popstate”事件就会被触发。我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示“id”的值。
它是非常的简单和有趣,不是吗?
使用JavaScript修改浏览器URL地址栏的实现代码的更多相关文章
- 使用JavaScript修改浏览器URL地址栏的实现代码【转】
引用自http://www.jb51.net/article/42240.htm 现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器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 ...
随机推荐
- ChemDraw教程:如何查看和删除俗名
化学范畴里,允许用俗名表示ChemDraw原子标记或原子标记的一部分,可以定义俗名的快捷键也可以自由查看或删除俗名,熟练掌握可以提高ChemDraw软件使用效率,下面将具体介绍此部分内容. 一.查看俗 ...
- 静默安装oracle 11g,环境预检查时报错,SEVERE: [FATAL] PRVF-0002 : 无法检索本地节点名
环境描述: 操作系统:Redhat 6.6_x64 oracle:11.2.0.4 x64 问题描述: 今天在安装oracle 11g的数据库,在进行预安装环境检查的时候,报下面的错误: [oracl ...
- Cocos2d-x 3.0 Lua编程 之 响应Android手机的按键
演示样例代码例如以下所看到的: local listenerKey= cc.EventListenerKeyboard:create() local function onKeyReleaseed(k ...
- float类型如何转换为string类型
在一些很大的float类型的地方会用科学记数法表示,这个时候如果想完整记录下来,还是得转字符串,这里书写一个float类型转string类型的方法 <?php function float_to ...
- Gson、FastJson、json-lib对比与实例
一.各个JSON技术的对比(本部分摘抄自http://www.cnblogs.com/kunpengit/p/4001680.html): 1.json-libjson-lib最开始的也是应用最广泛的 ...
- Python 流程控制:while
while 语法如下,当条件为假时循环才退出,否则会一直循环下去: while 条件: 执行语句 当条件为假时,才会执行else语句: while 条件: 执行语句 else: 执行语句
- View的setTag()与getTag()方法使用
通常我们是用findViewById()方法来取得我们要使用的View控件,不过除了这一种方法之处 ,我们还可以用View中的setTag(Onbect)给View添加一个格外的数据,再用getTag ...
- thinkjs——两表联查
问题来源: 现有一张texture以及一张tradename表,两者的联系是texture表中有一字段名为tid对应tradename表中的id,而tradename表中却有一字段type,要求根据t ...
- 安装memcacheq
1.下载memcacheq包 下载地址:http://code.google.com/p/memcacheq/downloads/list 解压包:# tar -zxvf memcache ...
- Android 计算器
首先在activity_main.xml加入一个EditText 通过xml的方式来沈成一个图像在drawable中新建一个white_bg.xml文件,同时选择一个shape标签corners设置圆 ...