使用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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
实测jquery data()如何存值
Aug 18 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
军训鉴定表自我鉴定
2014/02/13 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
写给领导的感谢信
2015/01/22 职场文书
应聘教师求职信范文
2015/03/20 职场文书
出国导师推荐信
2015/03/25 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers