H5笔记2-H5对History的新操作
来源:互联网 发布:育知同创大连 编辑:程序博客网 时间:2024/06/05 19:51
在H5出生以前,我们可以通过window.history访问浏览器的历史记录信息。
- 后退:window.history.back();
- 前进:window.history.forward();
- 后退、前进指定的步数window.history.go(n); n > 0为前进,n < 0为后退;
- 获得上一个浏览历史的URL : document.referrer;不是所有的用户代理(浏览器)都会设置这个变量。
在H5来到这个纷扰的世界后,它还带来了2种对History的新操作,history.pushState()和history.replaceState()这两个方法,他们分别允许添加和修改history实体。同时,这些方法会和window.onpostate事件一起工作,window.onpostate用来捕获监听历史记录改变事件。
history.pushState(state,title,url)往浏览器历史记录顶端添加一条历史记录。
state:该条历史记录的state对象,用来传递参数;json对象格式;可以为空;
title:该条历史记录的标题,可以为空;
url : 该条历史记录的URL.不可以为空;history.replaceState(state,title,url)修改当前URL。
参数说明同pushState();window.onpopstate 用来监听history的改变事件。
下面举一个具体的例子。有一个注册页面–》在注册页面填写完密码等信息–》点击“注册协议”超链接进入注册协议页面–》点击浏览器后退回到注册页面,发现密码框被清空了。
用replaceState解决这个问题如下:
//注册页面跳转至注册协议页面时,修改当前历史记录,保存用户填写的密码信息到当前历史记录function toRegisterPorocl(){ var pas = $("#password").val(); var pas2 = $("#password_confirm").val(); if(pas != "" || pas2 != ""){ history.replaceState({password:pas,password2:pas2},"",ctx + "/pub/toRegister.htm"); } window.location.href = ctx + "/pub/toRegisterProtocol.htm";}//注册协议页面点击后退:window.history.back();//注册页面添加监听window.onpopstate = function(event) { var pas = event.state.password; var pas2 = event.state.password2; $("#password").val(pas); $("#password_confirm").val(pas2);};
0 0
- H5笔记2-H5对History的新操作
- h5 history
- H5的新特性
- H5的新特性
- H5 的复制操作
- 对h5 css3的更多新的认识
- 解决浏览器对H5新标签的兼容性的解决
- H5 学习笔记2
- Canvas H5的新特性
- h5的部分新特性
- H5的新属性contenteditable
- H5学习之旅-H5的新特性(1)
- h5笔记
- H5新标签元素学习笔记
- 面试总结(2):H5新标签的兼容写法
- H5基础(2)-HTML5新的结构元素
- 使用h5的history改善ajax列表请求体验
- 使用h5的history改善ajax列表请求体验
- java多线程-用多线程找出最大随机数
- vs将dll和exe分开放的方法
- rand求随机整数
- Uva 1594 模拟
- vsftpd安装遇到问题
- H5笔记2-H5对History的新操作
- Android 控制屏幕全屏,标题栏,导航栏,布局属性
- 万年历
- html+css——网页布局
- javascript oo实现(面向对象)
- 外观模式
- node网络编程基础
- 坐标系变换公式(转http://blog.sina.com.cn/s/blog_3fd642cf0101cc8w.html)
- iOS进阶指南试读之UI篇