使用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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
如何更好的编写js async函数
May 13 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
canvas 中如何实现物体的框选
Aug 05 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php调整服务器时间的方法
2015/04/03 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python学习必备知识汇总
2017/09/08 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python实现名片管理系统
2020/02/14 Python
Python操作Excel的学习笔记
2021/02/18 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
青年文明号复核材料
2014/02/11 职场文书
北体毕业生求职信
2014/02/28 职场文书
2014和解协议书范文
2014/09/15 职场文书
关于安全的广播稿
2014/10/23 职场文书
全国助残日活动总结
2015/05/11 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
Ruby处理CSV数据方法详解
2022/04/18 Ruby