H5中的history方法Api介绍
最近公司在做一个微信公众号,看了项目源码,看到项目中用到了history的Api来进行控制浏览器的历史记录及前进/后退键;
下面来跟大家一起来捋捋history的Api方法和使用:
history.pushState(data,title,url):在浏览器中新增一条历史记录;
data会在onpopstate事件触发时作为参数传递过去,title为页面标题,url为页面地址;
history.replaceState(data,title,url):在浏览器中替换当前历史记录;
data会在onpopstate事件触发时作为参数传递过去,title为页面标题,url为页面地址;
history.length():当前历史列表中的历史记录条数;
window.onpopstate:实际上popstate是一个浏览器内置的点击事件,响应pushState和replaceState的触发调用;
//当页面加载时
window.onload=function(){
pushHistory();
//新增浏览器事件监听(popstate为事件名,触发事件执行function)
window.addEventListener("popstate",function(e){
//括号里面应为业务代码(要做的事情)
},false);
function pushHistory(){
//定义对象
var state={
title:“title”,
url:"#"
};
//调用history.pushState方法往浏览器历史记录上新增一条历史记录
window.history.pushState(state,"title","#");
}
}
history.back(-1):返回到当前页的上一页(原页面表单中的内容会保留)
history.back(0):页面刷新
history.back(1):当前页前进一页
history.go(-1): 返回到当前页的上一页(原页面表单中的内容会丢失,效果基本和history.back(-1)一样)
history.forward():当前页面前进一页(和history.back(1)效果一样)
声名:history方法可以直接调用,例:history.pushState(),也可以用window.history.pushState()来调用。因为history是属于浏览器中的子对象,两种调用方法都是生效的;
H5中的history方法Api介绍的更多相关文章
- 详解H5中的history单页面,手动实现单页面开发,细说h5单页面原理
就目前来看,前端的单页面开发占了很大一部分,一方面无刷新的切换增强了体验,并且浏览器记录依然存在,前进后退都没问题,在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用 ...
- H5中对history栈的操作
今天研究一下H5中history操作的相关知识,首先梳理一下基本内容: 一.在history中的跳转 使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转. ...
- Java中的wait方法 简单介绍。
一 wait方法怎么用? package com.aaa.threaddemo; /* * 多线程中的wait方法? public final void wait() throws Interrupt ...
- 低差异序列 (low-discrepancy sequences)之Hammerysley在半球中采样点方法的介绍
半球上的Hammersley 源作者:Holger Dammertz 一组关于如何在2D中使用Hammersley点集以在着色器程序中快速实用地生成半球方向的笔记.如果你发现任何错误或有意见,不要犹豫 ...
- Vusual C++连接Mysql和从MySql中取出数据的API介绍
.1 mysql_real_connect() 2.1.1 函数原型: MYSQL *mysql_real_connect(MYSQL *mysql, const char *host, const ...
- Spring 中事务控制的API介绍
1.PlatformTransactionManager Spring所有事务代理类都是基于PlatformTransactionManager接口的实现. 此接口是spring的事务管理器,它里面提 ...
- java中FILE类常用API介绍
- 关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
随机推荐
- Dijkstra算法与堆(C++)
Dijkstra算法用于解决单源最短路径问题,通过逐个收录顶点来确保得到以收录顶点的路径长度为最短. 图片来自陈越姥姥的数据结构课程:https://mooc.study.163.com/l ...
- .Net高级编程-自定义错误页 web.config中<customErrors>节点配置
错误页 1.当页面发生错误的时候,ASP.Net会将错误信息展示出来(Sqlconnection的错误就能暴露连接字符串),这样一来不好看,二来泄露网站的内部实现信息,给网站带来安全隐患,因此需要定制 ...
- Communicating with the UI Thread_翻译
In the previous lesson you learned how to start a task on a thread managed by ThreadPoolExecutor. Th ...
- Apache struts2 namespace远程命令执行_CVE-2018-11776(S2-057)漏洞复现
Apache struts2 namespace远程命令执行_CVE-2018-11776(S2-057)漏洞复现 一.漏洞描述 S2-057漏洞产生于网站配置xml的时候,有一个namespace的 ...
- py+selenium 老是定位不到文本内容【已解决】
问题:定位不到文本内容,路径也正确,该加frame也有加,等待时间也够长 测试: 上图看不出差异,但是测试1就定位得到,测试2就定位不到,为什么? 看下图就知道了 区别就在于,测试2后面多了个空格!! ...
- Shrio多Realm认证及认证策略
在大型的系统中,安全数据可能会存放在多个数据库中,而且每个数据的加密方式也是不一样的,那么单一的Realm就无法完成. 这时,就需要用到多Realm认证了,多Realm又涉及到认证策略,及在多个Rea ...
- 【小程序】小程序中设置 tabBar
小程序中 tabBar 的设置,tabBar 就是底部导航栏,在app.json中配置. list 为数组至少两项.tab栏的 position 为 top 时间,不显示图标. "tabBa ...
- 调用百度API进行文本纠错
毕设做的是文本纠错方面,然后今天进组见研究生导师 .老师对我做的东西蛮感兴趣.然后介绍自己现在做的一些项目,其中有个模块需要有用到文本纠错功能. 要求1:有多人同时在线编辑文档,然后文档功能有类似Wo ...
- Visual Studio 2015 WinForm应用程序打包教程
最近开发了一个小软件.由于需要打包.网上找了一些资料.然后整合了起来.希望对大家有所帮助.不全面请见谅. 本人开发工具用的是Visual Studio 2015 打包控件 InstallShield ...
- 基于SDN网络的负载均衡研究与实现
为什么需要软件定义网络 1.网络缺乏可扩展性,创新正在停滞不前. 我们最新的研究发现,几乎每两个组织中就有一个认为需要将网络功能扩展为采用SDN的主要业务触发因素,而不是其他催化剂.这一统计数据一 ...