使用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 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
js实现多个标题吸顶效果
Jan 08 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常用代码
2006/11/23 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
医药代表个人的求职信分享
2013/12/08 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
高中军训第一天感言
2014/03/06 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
个人债务授权委托书
2014/10/17 职场文书
2014年创卫工作总结
2014/11/24 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
入伍通知书
2015/04/23 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript