HTML5 history详解

最近研究vue-router单页转跳而不向服务器请求的原理,

主要是HTML5 history以及hash的应用,支持history时使用history模式

下面详细学习了一下常用的history相关的API

常用API:

1.history.length:

返回当前页面所产生的历史记录个数,即在同一个浏览器tab下产生的历史记录;

2.history.pushState(state,title,URL):

向浏览器新增一条历史记录,但是不会刷新当前页面(不会重载),其中state为对象,可以用作携带信息用,title:目前来看没啥用一般为空或null,URL:即要更改页面的URL,且必须同源,不能跨域;

3.history.replaceState(state,title,URL):

更改当前浏览器的历史记录,即把当前执行此代码页面的记录给替换掉,参数与第二条相同;

4.history.back()、history.forward()、history.go():

分别为前进一个历史,后退一个,history.go(Number),其中Number可正可负,即向前或向后若干个记录

5.history.state:

返回当前页面状态参数,此参数一般由history.pushState(state,title,URL);以及history.replaceState(state,title,URL);附带的state值,例子如下:

当前页面为http://example.com

history.pushState({a:1},null,"test1");//http://example.com/test1
history.state;    //{a:1}

history.pushState({b:2},null,"test2");//http://example.com/test2
history.state;    //{b:2}

history.back();    //http://example.com/test1
history.state;    //{a:1}

history.back();    //http://example.com
history.state;    //null

上面例子应该已经很明确的表明state的取值,即当前页面的状态值,没有状态值为null;

6.history事件onpopstate:

window.onpopstate = function(e){
    console.log(e.state);
}

在history.back(),history.forward(),history.go()时触发此事件,但是在history.pushState();history.replaceState();时并不会触发此事件,事件内可以获取到state状态值

由此可以看出vue-router中push()、go()等函数的一些端倪,但是vue-router比这个要复杂,

history是其基础之一

原文地址:https://www.cnblogs.com/xiaoqi2018/p/10257601.html

时间: 01-11

HTML5 history详解的相关文章

history详解

linux下history命令详解 如果你经常使用 Linux 命令行,那么使用 history(历史)命令可以有效地提升你的效率.本文将通过实例的方式向你介绍 history 命令的 15 个用法. 使用 HISTTIMEFORMAT 显示时间戳 当你从命令行执行 history 命令后,通常只会显示已执行命令的序号和命令本身.如果你想要查看命令历史的时间戳,那么可以执行: export HISTTIMEFORMAT='%F %T ' history | more 1 2008-08-05 1

html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能详解

在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用html5来实现他们.简单的让你大开眼界. HTML5 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这...有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮助你提高开发效率的同时,还带来了更炫的功能.好了,我们今天就来做一做看看效果吧!! 看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitio

当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)

读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. --国际巨头Google.苹果等都支持HTML 5标准,要不要学,你看着办! BAT三巨头都偷偷用上HTML 5了 HTML 5目前在国内的发展达到了空前的高度,以BAT三大巨头互联网公司为例,他们都已经争先恐后地将HTML 5的新技术融入到现实的开发领域中了.本书的例子会涉及WebQQ.

Linux中history历史命令使用方法详解

在/etc/profile里添加如下: #History export HISTTIMEFORMAT="[%F %T]" HISTDIR=/home/common/.hist if [ ! -d $HISTDIR ]; then         mkdir -p $HISTDIR         chmod 777 $HISTDIR fi export HISTSIZE=100000 export HISTFILE="$HISTDIR/${LOGNAME}.hist"

免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集

在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HTML借鉴了XML中DOCTYPE的使用方法,并赋予了新用法,如大家熟知的触发浏览器的标准模式.假使在制作一张页面时,没有设定DOCTYPE,则浏览器会以怪异模式状态进行处理(即Quirks模式),该模式与标准模式在盒模型.样式.布局等都存在较大差异.因此,DOCTYPE在制作页面时是不可或缺的部分.

HTML5详解

  HTML5的概念   HTML5并不仅仅是作为HTML标记语言的一个最新版本,更重要的是它制定了web应用开发的一系列标准, 成为第一个将web作为应用程序开发平台的HTML语言 HTML5定义了一系列的新元素, 如新语义标签, 智能表单, 多媒体标签, 可以帮助开发者创建互联网应用, 同时有令人眼花的css3, 还提供了一些JavaScript的API(应用程序接口), 列如: 地理定位 重力感应, 硬件访问, 可以在浏览器内实现类似于原生应用, 制作webAPP, 甚至结合Canvas可

《HTML 5网页开发实例详解》目录

第一篇  从宏观上认识HTML 5 讲述了HTML 5引发的Web革命.HTML 5的整体特性.HTML 5相关概念和框架和开发环境搭建. 第1章 HTML 5引发的Web革命 1.1  你是不是真的了解HTML 5 1.1.1  通过W3C认识HTML 5的发展史 1.1.2  HTML 5.HTML4.XHTML的区别 1.1.3  什么人应该学HTML 5 1.1.4  一个图告诉你如何学习HTML 5 1.2  浏览器之争 1.2.1  说说这些常见的浏览器 1.2.2  浏览器的兼容烦

android WebView详解,常见漏洞详解和安全源码

这篇博客主要来介绍 WebView 的相关使用方法,常见的几个漏洞,开发中可能遇到的坑和最后解决相应漏洞的源码,以及针对该源码的解析. 由于博客内容长度,这次将分为上下两篇,上篇详解 WebView 的使用,下篇讲述 WebView 的漏洞和坑,以及修复源码的解析. 下篇:android WebView详解,常见漏洞详解和安全源码(下) 转载请注明出处:http://blog.csdn.net/self_study/article/details/54928371. 对技术感兴趣的同鞋加群 54

CentOS 7以yum方式安装zabbix3.2及配置文件详解

一.zabbix简介与环境准备 简介详见 ---> zabbix简介 环境准备: CentOS 7(node7):zabbix-server,web,mysql,agent mariadb:5.5.50 zabbix组件:3.2.1 apache:2.4.6 二.安装与配置 1.安装数据库(mariadb),可直接yum安装 [[email protected] ~]# vim /etc/yum.repos.d/MariaDB.repo [mariadb]  name = MariaDB  ba

WebView使用详解(三)——WebChromeClient与LoadData补充

前言: 我不会忘了我 忘了我曾说过一定会得到的梦想 --<老大>小柯 相关文章 1.<WebView使用详解(一)--Native与JS相互调用(附JadX反编译)> 2.<WebView使用详解(二)--WebViewClient与常用事件监听> 一.WebChromeClient 1.概述 (1). 与WebViewClient的区别 很多同学一看到这里有Chrome,立马就会想到google 的Chrome浏览器:这里并不是指Chrome浏览器的意思,而是泛指浏览