使用JavaScript修改浏览器URL地址栏的实现代码


Posted in Javascript onOctober 21, 2013

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

英语原文: http://hasin.me/2013/10/16/manipulating-url-using-javascript-without-freshing-the-page/

Javascript 相关文章推荐
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 #Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 #Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 #Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 #Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 #Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 #Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 #Javascript
You might like
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python结合API实现即时天气信息
2016/01/19 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
实习教师自我鉴定
2013/12/12 职场文书
运动会通讯稿500字
2014/02/20 职场文书
疾病捐款倡议书
2014/05/13 职场文书
综治工作汇报材料
2014/10/27 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript