文档章节

使用 JavaScript 修改浏览器 URL 地址栏

完美世界
 完美世界
发布于 2014/06/04 22:57
字数 526
阅读 13
收藏 0

现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器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”的值。


© 著作权归作者所有

共有 人打赏支持
上一篇: NOR、NAND区别
下一篇: 无线方案
完美世界
粉丝 10
博文 151
码字总数 134011
作品 0
西城
高级程序员
私信 提问
冷门却使用的 javascript 技巧

前端已经被玩儿坏了!像用近似乱码的 javascript 拼一个图形,而且可以正常运行等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子...

modernizr
2014/06/23
1K
16
javaFX实例1-webView实现简单浏览器

webView: 是一个管理webEngine和显示它中间内容的节点。这个对象只能从fx的线程中创建。 webEngine: 是一个管理网页的不可见控件,它可以加载网页,创建文档模型,运行javascript,加载必要...

xiaomin0322
2018/06/13
0
0
前端路由实现原理(history)

前端路由实现(history) 了解: HTML5 history新增了两个API:history.pushState和history.replaceState 两个api都接受三个参数 状态对象(state object):一个JavaScript对象,与用pushSta...

林晖
2018/07/09
0
0
关于RunJS你不知道的几个事情

关于RunJS,一直没有一个好的教程或者文档来说明怎么使用,当然基本的使用就是编辑html、css、js代码并发布分享了。这里我要列出一些关于RunJS你不知道的几个tip。 收起左边栏:大家可以点击...

王振威
2012/11/12
5.1K
10
js中url拼接提示我要换成'&amp;'字符,但是提交之后却不能被转换,导致后台接收不到参数

如题,框架为springboot+mybatis+thymeleaf js中一段简单的url跳转: onclick调用js函数,浏览器地址栏为: http://localhost:8080/?searchText=&pageNo=2 导致后台接收不到pageNo参数,将地址...

韩涛
2017/01/06
679
3

没有更多内容

加载失败,请刷新页面

加载更多

如何在React工程中使用JavaScript Barcode SDK创建Web条形码应用

基于WebAssembly构建的Dynamsoft JavaScript Barcode SDK让Web开发者能够创建适用于浏览器的高性能条码应用。这篇文章分享下如何使用React快速创建一个简单的Web条形码扫描应用。 下载 Node...

yushulx
28分钟前
1
0
java lambda笔记

c#中的lambda表达式简直不要太爽,但是感觉java的lambda和c#比有待继续提高。 先搞个筛选List集合的东西,我们先搞个集合玩玩。 List<Person> person = new ArrayList<Person>();Person p...

朝如青丝暮成雪
29分钟前
0
0
最严新规发布 网络短视频平台该如何降低违规风险?

1月9日中国网络视听节目服务协会对外正式发布了多项规范,对版权视频保护及违规内容,都进行了更加详细的标准制定,整体政策更加严格。 规范规定,网络短视频平台应当履行版权保护责任,不得...

阿里云官方博客
37分钟前
1
0
深入解读阿里云数据库POLARDB核心功能物理复制技术

日志是数据库的重要组成部份,按顺序以增量的方式记录了数据库上所有的操作,日志模块的设计对于数据库的可靠性、稳定性和性能都非常重要。 可靠性方面,在有一个数据文件的基础全量备份后,...

zhaowei121
43分钟前
1
0
CentOS 非root 用户 使用sudo 命令免密码

1. 使用su/su - 命令进入root权限下; 2. 给/etc/sudoers文件添加写权限 chmod u+w /etc/sudoers 3.找到“root ALL=(ALL) ALL ”,在后面添加:"dba ALL=(ALL) NOPASSWD: ALL" 4.保存退出,并......

驛路梨花醉美
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部