最近公司在做一个微信公众号,看了项目源码,看到项目中用到了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介绍的更多相关文章

  1. 详解H5中的history单页面,手动实现单页面开发,细说h5单页面原理

    就目前来看,前端的单页面开发占了很大一部分,一方面无刷新的切换增强了体验,并且浏览器记录依然存在,前进后退都没问题,在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用 ...

  2. H5中对history栈的操作

    今天研究一下H5中history操作的相关知识,首先梳理一下基本内容: 一.在history中的跳转 使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转. ...

  3. Java中的wait方法 简单介绍。

    一 wait方法怎么用? package com.aaa.threaddemo; /* * 多线程中的wait方法? public final void wait() throws Interrupt ...

  4. 低差异序列 (low-discrepancy sequences)之Hammerysley在半球中采样点方法的介绍

    半球上的Hammersley 源作者:Holger Dammertz 一组关于如何在2D中使用Hammersley点集以在着色器程序中快速实用地生成半球方向的笔记.如果你发现任何错误或有意见,不要犹豫 ...

  5. Vusual C++连接Mysql和从MySql中取出数据的API介绍

    .1 mysql_real_connect() 2.1.1 函数原型: MYSQL *mysql_real_connect(MYSQL *mysql, const char *host, const ...

  6. Spring 中事务控制的API介绍

    1.PlatformTransactionManager Spring所有事务代理类都是基于PlatformTransactionManager接口的实现. 此接口是spring的事务管理器,它里面提 ...

  7. java中FILE类常用API介绍

  8. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

  9. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

随机推荐

  1. git简介 http://msysgit.github.io/

    集中式vs分布式 Linus一直痛恨的CVS及SVN都是集中式的版本控制系统,而Git是分布式版本控制系统,集中式和分布式版本控制系统有什么区别呢? 先说集中式版本控制系统,版本库是集中存放在中央服务 ...

  2. 不调用free会内存泄露吗?

    内存泄露的概念大家可以自行百度下,本文不做阐述.本文要讲的是在程序中分配了内存,但是最后没有使用free()函数来释放这块内存,会导致内存泄露吗?比如有如下代码: #include <stdio ...

  3. NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load xxxx错误解决方法

    在开发项目的过程中,和后端对接,我们使用是一个成熟的集成很全面的架构JHipster.后端为java spring-boot 前端ts+react,需求是有一个需要在页面里嵌套iframe的需求.然后 ...

  4. ng-bootstrap 组件集中 tabset 组件的实现分析

    ng-bootstrap: tabset 本文介绍了 ng-bootstrap 项目中,tabset 的实现分析. 使用方式 <ngb-tabset> 作为容器元素,其中的每个页签以一个 ...

  5. [记录]inotifywait+rsync脚本和sersync2服务检测的脚本

    1)inotifywait+rsync脚本: #!/bin/bash src=/data/ # 需要同步的源路径 des=data # 目标服务器上 rsync --daemon 发布的名称,rsyn ...

  6. seleniumGrid分布式远程执行测试脚本

    执行UI自动化测试脚本时,不仅可以在本地执行,也可以远程指定某计算机执行测试脚本,seleniumGrid为我们提供了这类服务,但还需要自己搭建环境. 一.本地计算机需要准备java环境和seleni ...

  7. Elasticsearch 技术分析(九):Elasticsearch的使用和原理总结

    前言 之前已经分享过Elasticsearch的使用和原理的知识,由于近期在公司内部做了一次内部分享,所以本篇主要是基于之前的博文的一个总结,希望通过这篇文章能让读者大致了解Elasticsearch ...

  8. Excel催化剂开源第23波-VSTO开发辅助录入功能关键技术

    Excel催化剂开源第23波-VSTO开发辅助录入功能关键技术 Excel催化剂   2019.01.12 14:10* 字数 2948 阅读 41评论 0喜欢 0 编辑文章 在Excel催化剂的几大 ...

  9. SQL Server 保存特殊字符时乱码

    场景:协同完成的项目,数据库是同事创建,我们共同使用的表. 客户反应有一些字符查看的时候出现乱码.第一反应是否编码规则的问题.后来去数据库查发现数据库里就是乱码,百度了一下发现说特殊字符要保存在NVA ...

  10. python函数对象-命名空间-作用域-02

    函数对象 函数是第一对象: # 函数名指向的值可以被当做参数传递 函数对象的特性(*****灵活运用,后面讲装饰器会用到) 函数名可以像变量一样被传递 # 变量可以被传递 name = 'jason' ...