文档章节

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

完美世界
 完美世界
发布于 2014/06/04 22:57
字数 526
阅读 13
收藏 0
点赞 0
评论 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
解决window.open() 详解 《弹出框浏览器拦截阻止,和弹出狂隐藏地址栏》 JS页面跳转

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

郏高阳
2013/04/12
0
7
window.location.hash属性介绍

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

萧萧风雨
2013/08/16
0
1
40 个轻量级 JavaScript 库

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导致你的网页尺寸...

晨曦之光
2012/03/09
0
0
JavaScript零基础入门——(十四)JavaScript的BOM

JavaScript零基础入门——(十四)JavaScript的BOM 大家好,欢迎回到我们的JavaScript零基础入门。上一节课我们了解了JavaScript的事件,这一节课,我们以JavaScript的BOM,来结束JavaScrip...

JandenMa
07/08
0
0
Ajax保留浏览器历史的解决方案

解决方案如下: 方案一:使用window. Onhashchange 事件 如下面Html片段,点击不同的连接,在mainPanel中加载不同的页面: <ul class="menu"> <li><a href="/home/index#page=1">page1</a></......

为梦而来
2014/04/18
0
0
【JS教程】100+常用JS函数(方法)

100+常用JS函数(方法) 1. document.write("");为 输出语句 2. JS中的注释为// 3. 传统的HTML文档顺序是:document->html->(head,body) 4. 一个浏览器窗口中的DOM顺序是:window->(navig...

呢喃的猫咪
2012/06/08
0
0
前端性能优化:细说浏览器渲染的重排与重绘

前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识,常作为前端工程师乐此不疲的技术讨论话题,也正因如此,它也是面试时容易被问及的面试题之一。 ...

小白师兄
今天
0
0
javascript获取网页URL地址及参数等

用javascript获取url网址信息 Java代码 <script type="text/javascript"> document.write("location.host="+location.host+"<br>"); document.write("location.hostname="+location.hostname......

王锐
2012/08/22
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

百度云iOS架构师在职场中的忠告

1.工具不能代替思考 在我多年的咨询工作和与许多组织和管理者的共事中,我发现了修复问题的共同套路,那就是管理人员相信工具可以“解决”给出的问题。当问题域被理解透彻,并且不可能有很多...

_小迷糊
22分钟前
0
0
Java基础——异常

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 异常处理: 可以挖很多个陷阱,但是不要都是一样...

凯哥学堂
34分钟前
0
0
180723-Quick-Task 动态脚本支持框架之结构设计篇

文章链接:https://liuyueyi.github.io/hexblog/2018/07/23/180723-Quick-Task-动态脚本支持框架之结构设计篇/ Quick-Task 动态脚本支持框架之结构设计篇 相关博文: 180702-QuickTask动态脚本...

小灰灰Blog
37分钟前
0
0
SBT 常用开发技巧

SBT 一直以来都是 Scala 开发者不可言说的痛,最主要的原因就是官方文档维护质量较差,没有经过系统的、循序渐进式的整理,导致初学者入门门槛较高。虽然也有其它构建工具可以选择(例如 Mill...

joymufeng
42分钟前
0
0
HBase in Practice - 性能、监控及问题解决

李钰(社区ID:Yu Li),阿里巴巴计算平台事业部高级技术专家,HBase开源社区PMC&committer。开源技术爱好者,主要关注分布式系统设计、大数据基础平台建设等领域。连续4年基于HBase/HDFS设计和...

中国HBase技术社区
43分钟前
1
0
ES18-JAVA API 批量操作

1.批量查询 Multi Get API public static void multiGet() {// 批量查询MultiGetResponse response = getClient().prepareMultiGet().add("my_person", "my_index", "1")// 查......

贾峰uk
47分钟前
0
0
SpringBoot2.0使用health

1,引入actuator <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency> 2,application.properties ......

暗中观察
54分钟前
0
0
阿里巴巴Java开发规约

###编程规约 命名风格 【强制】代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束 【强制】代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。...

简心
59分钟前
0
0
如何用TypeScript来创建一个简单的Web应用

转载地址 如何用TypeScript来创建一个简单的Web应用 安装TypeScript 获取TypeScript工具的方式: 通过npm(Node.js包管理器) npm install -g typescript 构建你的第一个TypeScript文件 创建...

durban
今天
0
0
分享好友,朋友圈自定义分享链接无效

这个问题是微信6.5.6版本以后,修改了分享规则:分享的连接必须在公众号后台设定的js安全域名内

LM_Mike
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部