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

时间: 2024-08-30 08:54:00

HTML5 history详解的相关文章

history详解

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

HTML5 API详解(1):fullscreen全屏模式

fullscreen API 接口 属性1:fullscreenElement 该属性返回当前处于全屏模式的DOM元素. 属性2:fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态. 方法1:requestFullscreen() 请求进入全屏模式. 方法2:exitFullscreen() 退出全屏模式. 事件1:fullscreenchange 进入/退出全屏模式切换时会触发. 事件2:fullscreenerror 进入/退出全屏模式失败

HTML5动画效果视频详解 Html5动画视频教程

课程目录:01.HTML5公开课03期-HTML5动画详解-第1讲:rotate旋转.wmv02.HTML5公开课03期-HTML5动画详解-第2讲:scale缩放.wmv03.HTML5公开课03期-HTML5动画详解-第3讲:skew扭曲.wmv04.HTML5公开课03期-HTML5动画详解-第4讲:translate平移.wmv05.HTML5公开课03期-HTML5动画详解-第5讲:transition案例(一).mp405.HTML5公开课03期-HTML5动画详解-第6讲:tran

转:HTML5 History API 详解

从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页,所以你又要重新翻一次. 再或者,你想把这个评论发给别人分享,一面给了别人页面地址(为什么不直接复制呢?因为要连带视频等场景啊),一面又要加一句嘱咐:请翻到下面评论的第XX页的XX楼. 这就是问题.试想一下,如果浏览器能记住你当前的状态(比如看到了第十几页),而不是一刷新就还原,是不是就显得智能多了

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可