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()控制视 ...
 
随机推荐
- 寻觅Azure上的Athena和BigQuery (二):神奇的PolyBase
			
前情回顾 在“数据湖”概念与理论逐渐深入人心的今天,面向云存储的交互式查询这个需求场景显得愈发重要.这是因为原生的云存储(主要指S3这样的对象存储)既能够容纳大容量的明细数据,又能在性能和成本间取得一 ...
 - Codeforces Round #565 (Div. 3) F.Destroy it!
			
题目地址:http://codeforces.com/contest/1176/problem/F 思路:其实就是一个01背包问题,只是添加了回合和每回合的01限制,和每当已用牌数到了10的倍数,那张 ...
 - Excel催化剂开源第38波-json字符串转多个表格结构
			
作为开发者来说,面对json字符一点不陌生,但对于普通用户来说,更合适的是数据表结构的数据,最好数据已经躺在Excel表格内,不用到处导入导出操作.所以开发者和用户之间是有不同的数据使用思维和需求的. ...
 - 个人永久性免费-Excel催化剂功能第38波-比Vlookup更好用的查找引用函数
			
谈起Excel的函数,有一个函数生来自带明星光环,在表哥表姐群体中无人不知,介绍它的教程更是铺天盖地,此乃VLOOKUP函数也.今天Excel催化剂在这里冒着被火喷的风险,大胆地宣布一个比VLOOKU ...
 - [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示
			
因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...
 - Error:Failed to resolve: com.android.support:support-annotations:26.0.2
			
异常信息记录: Error:Failed to resolve: com.android.support:support-annotations:26.0.2 <a href="ins ...
 - Kafka集群部署以及使用
			
Kafka集群部署 部署步骤 hadoop102 hadoop103 hadoop104 zk zk zk kafka kafka kafka http://kafka.apache.org/down ...
 - Android总结之打开手机相册获取图片
			
上一篇,总结了如何打开照相机获取图片,详情请看>>>> 这篇将总结如何打开手机存储(相册)来获取手机上的图片. 打开相册 在需要这个功能的类中,我们可以自定义一个方法openA ...
 - [leetcode] 300. Longest Increasing Subsequence (Medium)
			
题意: 求最长增长的子序列的长度. 思路: 利用DP存取以i作为最大点的子序列长度. Runtime: 20 ms, faster than 35.21% of C++ online submissi ...
 - socket发送请求,协程
			
1.socket发送请求 #发送请求的方式 #方式一 import requests ret = requests.get("https://www.baidu.com/s?wd=abc&q ...