文档章节

使用 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”的值。


© 著作权归作者所有

共有 人打赏支持
完美世界
粉丝 10
博文 151
码字总数 134011
作品 0
西城
高级程序员
javaFX实例1-webView实现简单浏览器

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

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

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

林晖
07/09
0
0
第220天:Angular---路由

内容介绍,为什么要使用前端路由? 在2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用from表单去提交了,因为from表单之间的提交会导致页面之...

半指温柔乐
05/05
0
0
window.location.hash属性介绍

location是javascript里 边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而 location.hash则可以用来获取或设置页面的标签值。...

萧萧风雨
2013/08/16
0
1
解决window.open() 详解 《弹出框浏览器拦截阻止,和弹出狂隐藏地址栏》 JS页面跳转

最近在做支付宝在线支付,场景:在商务网站选择产品后点击确认购买,把数据传递到后台保存数据库,然后直接执行window.open(URL) 结果发先跳转页面会被浏览器拦截阻止打开窗口!经过研究发现...

郏高阳
2013/04/12
0
7

没有更多内容

加载失败,请刷新页面

加载更多

js的

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:forEach items="${topics}" var="item" varStatus="status"> </c:forEach> 注意 c:forEach E大写 varStatus ......

踏破铁鞋无觅处
20分钟前
0
0
带你走进java集合之ConcurrentHashMap

一、概述 上一篇文章《带你走进java集合之HashMap》分析了HashMap的实现原理,重点分析了HashMap是怎么样的一种数据结构,以及如何去插入,查询,扩容等操作。相信经过上一篇文章的学习,大家...

木木匠
21分钟前
0
0
spring-boot 热加载实现替换

参考资料 1、spring-boot 热加载实现替换

哎小艾
23分钟前
0
0
kotlin使用spring mvc(二)

使用FilterRegistrationBean注册Filter 使用WebFilter配置过滤器的缺点是不可以对过滤器进行排序,但是使用FilterRegistrationBean可以设置Filter执行的顺序 编写过滤器 class CustomFilter...

weidedong
24分钟前
0
0
Qt那些事0.0.5

碰到了中文乱码问题。 虽然是自己做了件令自己都不齿的事情,但是情急之下,暂且如此:将中文硬编码进代码中。 我也想通过tr+qm翻译进行转换,但是难过的是,tr之后,找不到或者不起作用。这...

Ev4n
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部