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()控制视 ...
随机推荐
- centos7 + Nginx+ HTTPS + uwsgi + python3.6 + Docker + Django1.11 + mysql 5.6 + virtualenv 环境搭建
环境搭建: 系统: centos7.2 x64 开发环境: python3.6 Django 1.11 虚拟环境: [Docker](https://www.runoob.com/dock ...
- Spring Boot + Elasticsearch 实现索引批量写入
在使用Eleasticsearch进行索引维护的过程中,如果你的应用场景需要频繁的大批量的索引写入,再使用上篇中提到的维护方法的话显然效率是低下的,此时推荐使用bulkIndex来提升效率.批写入数据 ...
- 理解vue-loader
事情的起源是被人问到,一个以.vue结尾的文件,是如何被编译然后运行在浏览器中的?突然发现,对这一块模糊的很,而且看mpvue的文档,甚至小程序之类的都是实现了自己的loader,所以十分必要抽时间去 ...
- I/O:FileChannel
FileChannel: abstract void force(boolean metaData) :强制将所有对此通道的文件更新写入包含该文件的存储设备中. abstract MappedByte ...
- 【题解】跳房子-C++
Description奶牛按不太传统的方式玩起小朋友玩的跳房子游戏,现给出一个5*%的由数字组成的网格.它们在格子中向前前跳,向后跳,向左跳,向右跳,跳到网格中另一个数字后,又这样继续跳(可能跳到某个 ...
- Excel催化剂开源第9波-VSTO开发图片插入功能,图片带事件
图片插入功能,这个是Excel插件的一大刚需,但目前在VBA接口里开发,如果用Shapes.AddPicture方法插入的图片,没法对其添加事件,且图片插入后需等比例调整纵横比例特别麻烦,特别是对于插 ...
- YOLO V1损失函数理解
YOLO V1损失函数理解: 首先是理论部分,YOLO网络的实现这里就不赘述,这里主要解析YOLO损失函数这一部分. 损失函数分为三个部分: 代表cell中含有真实物体的中心. pr(object) ...
- CSS画出三角形(利用Border)
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
- 从0系统学Android-2.4隐式Intent
本系列文章,参考<第一行代码>,作为个人笔记 更多内容:更多精品文章分类 使用隐式 Intent 相对于显示 Intent ,隐式 Intent 比较含蓄.这种方式不明确指出我们想要启动哪 ...
- 通过sysbench工具实现MySQL数据库的性能测试
1.背景 sysbench是一款压力测试工具,可以测试系统的硬件性能,也可以用来对数据库进行基准测试.sysbench 支持的测试有CPU运算性能测试.内存分配及传输速度测试.磁盘IO性能测试.POS ...