使用JavaScript修改浏览器URL地址栏的实现代码
2015-07-28 17:21
651 查看
源自/article/1251421.html
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。
<button onclick="justUrlChange()">点击-循环改变URL地址,但并不和后台交互</button> <script type="text/javascript"> function justUrlChange(){ for(i=0;i<5;i++){ var j = i+10; var stateObject = {id: j};//json格式 var title = "Wow Title "+i; var newUrl = "/SpringMVC/teacher/inWhichRoom.do?id="+i; history.pushState(stateObject,title,newUrl); /* 第一个参数,是一个Json对象 , 在你储存有关当前URl的任意历史信息. 第二个参数,title 就相当于传递一个文档的标题 . 第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。 */ } } /* 现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。 对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。 但是我们怎么重新获得历史状态,并且在此基础上做些事情呢? 我们需要对“popstate”添加事件监听器,这将会在每次历史对象的状态改变的时候触发。 */ window.addEventListener('popstate', function(event) {//给浏览器添加 "返回" 监听事件,且popstate必须小写 readState(event.state);//弹出的都是j的信息 }); /* 现在你会看到无论什么时候你点击返回按钮, 一个popstate事件就会被触发。 我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示id的值 */ function readState(data){ alert(data.id); } </script>
相关文章推荐
- Servlet+JSP要点
- js 验证用户名和密码是否为空
- js实现登陆遮罩效果的方法
- js之this,请问你是谁
- 怎么通过onclick事件获取js函数返回值(代码少)
- Ajax与JSON技术
- JavaScript学习总结
- js中数组元素去重
- js删除数组元素
- json在线解析
- js中字符串的拼接的另一种方法
- jsp页面加时间戳问题
- JavaScript 中的 this
- JavaScript核心
- 使用Javascript Ajax 通信操作JSON数据 [上]
- js技巧--转义符"\"的妙用
- js禁用回退键backspace解决办法
- JQ兼容各种JS库的写法
- JS通过身份证号码获取出生年月日
- js 判断时间大小