正文 

当前位置： 首页 > IT > java教程

h5系列之history（必知必会）(代码片段)

魔芋铃 魔芋铃     2022-11-07     424

关键词：

H5系列之History（必知必会）
 
目录
 
 
 
概念
 
 
  • 理解History Api的使用方式
  • 目的是为了解决哪些问题
 
作用：ajax获取数据时，可以改变历史记录，从而可以使用浏览器的后退和前进。
 
【】
 
 
【01】History 对象
 
【】Window对象的history属性引用的是该窗口的History对象。
 
【】History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。
 
History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
 
 
History 对象最初设计来表示窗口的浏览历史。
但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。
 
 
history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
 
出于安全方面的考虑，开发人员无法得知用户浏览过的URL。（如果允许，则任意脚本都可以窥探你的浏览历史。）
 
不过，借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。
 
 
 
【】back()和forward()，页面通常是从浏览器缓存中加载，而不是重新要求服务器发送新的请求。
 
【】虽然history并不常用，但在创建自定义的“后退”和“前进”按钮，以及检测当前页面是不是用户历史记录中的第一个页面时，还是必须使用它。
当页面的URL改变时，就会生成一条历史记录。
 
在IE8及更高版本、Opera、Firefox、Safari 3及更高版本以及Chrome中，这里所说的改变包括URL中hash的变化（因此，设置location.hash会在这些浏览器中生成一条新的历史记录）。
 
 

【01】

History API
 
Web应用通常都是动态地生成或载入页面内容，并在无须刷新页面的情况下就显示新的应用状态。
如果想要提供用户能够通过浏览器的“后退”和“前进”按钮，直观地切换应用状态，像这类应用就必须自己处理应用的历史记录管理。
 
【】
Ajax有一个问题一直困扰着开发者，就是网页状态无法被添加到历史记录中，这意味着用户不能通过浏览器的“前进”和“后退”按钮前进或者退回到某个状态。
 
【】可以在历史记录中添加状态或改变状态
 
【】可以使用JavaScript来部分更新页面，又能更新地址栏和浏览器历史记录。
 
 
【】使用History API实现了地址栏改变而页面不跳转的效果。
 
【】而通过状态管理API，能够在不加载新页面的情况下改变浏览器的URL。
 
 

【】在使用HTML5的状态管理机制时，请确保使用pushState()创造的每一个“假”URL，在Web服务器上都有一个真的、实际存在的URL与之对应。否则，单击“刷新”按钮会导致404错误。

 
 
 
 
【】可能犯的一个错误
 
 
如果你遇到使用History API没有起作用的情况，可以尝试用try catch来试着捕获异常。
 
你很可能会发现异常显示为SECURITY_ERR：DOM Exceptin 18。
 
这是由于History API采用同源控制策略来保证安全性，避免恶意网站修改用户其他网站的历史记录。
 
出现这种情况的原因是你没有正确设置URL或者使用本地页面，History API认为你修改的是另外一个域名的历史记录。
 
 
 

先来看看"history"接口的详细方法：

interface History 
   readonly attribute long length;
   readonly attribute any state;
   void go(optional long delta);
   void back();
   void forward();
   void pushState(any data, DOMString title, optional DOMString? url = null);
   void replaceState(any data, DOMString title, optional DOMString? url = null);
 ;
 
 
 
HTML5定义了两种用于历史记录管理的机制。
 
其中比较简单的历史记录管理技术就是利用location.hash和hashchange事件。
 
 
设置location.hash属性会更新显示在地址栏中的URL，同时会在浏览器的历史记录中添加一条记录。
hash属性设置URL的片段标识符，通常是用于指定要滚动到的文档中某一部分的ID。
 
 
 
 
但是location.hash不一定非要设置为一个元素的ID：
它可以设置成任何的字符串。
如果能够将应用状态编码成一个字符串，就可以使用该字符串作为片段标识符。
 
设置了location.hash属性后，接下来要实现允许用户通过“后退”和“前进”按钮来切换不同的文档状态。这个时候，应用必须要想办法检测状态变化，以便它能够读取出存储在片段标识符中的状态并相应地更新自己的状态。
 
支持HTML5的浏览器一旦发现片段标识符发生了改变，就会在Window对象上触发一个hashchange事件。
 
这样，在支持hashchange事件的浏览器中，就可以通过设置window.onhashchange为一个处理程序函数，使得每次由于切换历史记录导致片段标识符变化的时候，都会调用该处理程序函数。
当调用该处理程序函数的时候，就可以对location.hash的值进行解析，然后使用该值包含的状态信息来重新显示应用。
 
 

　　为了提高Web页面的响应速度，越来越多的开发者开始采用单页面结构（single-page application）的解决方案。

所谓的单页面结构就是指多个页面间切换时，不刷新当前整个页面，更新页面展示数据，并且相应地改变地址栏中的url，以使用户可以分享这个url。

　　

如果你使用chrome或者firefox等浏览器访问"github.com、plus.google.com"等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，

同时页面的URL发生了改变。并且能够很好的支持浏览器前进和后退。

 
 
 
【】如果窗口包含多个子窗口（比如<iframe>元素），子窗口的浏览历史会按时间顺序穿插在主窗口的历史中。
这意味着在主窗口调用history.back()（举例）可能会导致其中一个子窗口往回跳转到前一个显示的文档，但主窗口保留当前状态不变。
 
【】现代Web应用可以不通过载入新文档而动态地改变自身内容（这么做可能希望用户能用“后退”和“前进”按钮在这些动态创建的应用状态之间进行跳转。)
 
【】HTML5之前的历史管理是个更复杂的难题。
应用程序必须要在窗口浏览历史中创建一个新的条目来管理自身的历史记录，用历史条目关联自身的状态信息，判断什么时候用户使用了“后退”按钮来移动到不同的历史条目，联合那个条目获取状态信息，并且重新创建应用程序之前的状态。
 
 
【】一种方式是用隐藏的<iframe>来保存状态信息并在浏览器的历史中创建条目。
为了创建新的历史条目，需要用Document对象的open()和write()方法动态地把一个新文档写入这个隐藏的窗体。
不管怎样，文档内容应该包含重新创建应用状态所需要的状态信息。当用户单击“后退”按钮，隐藏的窗体的内容会改变。
在HTML5之前，没有生成事件来通知你这个改变，因此，为了检测用户是否单击了“后退”按钮，可能要用setInterval()每秒对隐藏的窗体检测两到三次，来看它是否改变了。
 
【】在实际工作中，在那些需要以前的HTML5历史管理的项目中，开发者通常会使用一些现成的解决方案。
很多JavaScript框架都实现了这种功能。比如，jQuery有history插件，另外也有些单独的管理历史记录的类库。
 

 

 
 
兼容性
 
 
【03】兼容性
 
Firefox 4+、Safari 5+、Opera 11.5+和Chrome8+。
IE10支持。
 
 IOS 手机支持5.1+
安卓4.3+
 

为了用变成方式确定浏览器是否支持这个API，可以用下面的一行代码检验：

return!!(window.history&&history.pushState);
 
 
 
 

如果你是用的现代浏览器，可以用下面的代码：

if(Modernizr.history)
    //HistoryAPISupported

如果你的浏览器不支持History API，可以使用history.js代替。

 
 
 
 
 
 

**

 

属性

【02】
length 属性
定义和用法
 
返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡（浏览器）加载的一个页面中，这个属性返回1。

 
length 属性声明了浏览器历史列表中的元素数量。
 
保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言，history.length等于0。
 
通过像下面这样测试该属性的值，可以确定用户是否一开始就打开了你的页面。
if (history.length == 0)
    //这应该是用户打开窗口后的第一个页面
 
 
注释：IE 6 和 Opera 9 以 0 开始，而 Firefox 1.5 以 1 开始。
 
语法
history.length
 
实例
<html>
<body>
<scripttype="text/javascript">
    console.log(history.length);
</script>
</body>
</html>
 
 

设计模式必知必会系列终章(代码片段)

目录装饰器模式工厂方法模式抽象工厂模式​编辑适配器模式代理模式装饰器模式官方定义:  动态地给⼀个对象增加⼀些额外的职责。就增加功能而言，装饰器模式比生成子类更为灵活。——《设计模式》GoF通俗解释: 装... 查看详情

androidservice完全解析之必知必会(代码片段)

想必对于Android开发者来说，对Service一定不陌生了，作为大名鼎鼎的四大组件之一的service，在Android中有着不可替代的作用，它不像Activity那么光鲜亮丽，一般都是默默躲在后台执行着一些“见不得人的”任务&#... 查看详情

必知必会的设计原则——合成复用原则(代码片段)

 设计原则系列文章 必知必会的设计原则——单一职责原则必知必会的设计原则——开放封闭原则必知必会的设计原则——依赖倒置原则必知必会的设计原则——里氏替换原则必知必会的设计原则——接口隔离原则必知必... 查看详情

mysql学习--mysql必知必会(代码片段)

?上图为数据库操作分类：??下面的操作參考（mysql必知必会）创建数据库运行脚本建表：mysql>createdatabasemytest;QueryOK,1rowaffected(0.07sec)mysql>showdatabases;+--------------------+|Database|+--------------------+|infor 查看详情

hive必知必会(代码片段)

hive： 基于hadoop，数据仓库软件，用作OLAPOLAP：onlineanalyzeprocess 在线分析处理OLTP：onlinetransactionprocess在线事务处理 事务： ACID A：atomic 原子性 C:consistent 一致性 I：isolation 隔离性 D:durability 持久性 1读未提交 　　脏读 //事务... 查看详情

mysql必知必会(代码片段)

姊妹篇——Hive必知必会(数据仓库)：https://hiszm.blog.csdn.net/article/details/119907136文章目录第一章：数据库基础基本概念什么是SQL第二章：MySQL简介第三章：了解数据库和表第四章：检索数据SELECT语句第五章：... 查看详情

crypto必知必会(代码片段)

crypto必知必会最近参加了个ctf比赛，在i春秋，南邮方面刷了一些crypto密码学题目，从中也增长了不少知识，在此关于常见的密码学知识做个小总结！Base编码Base编码中用的比较多的是base64，首先就说一下Base64编码方式将字符串以... 查看详情

架构师必知必会系列系统架构设计需要知道的5大精要（5systemdesignfundamentals）...(代码片段)

无论是在大厂还是初创公司，技术产品经理(TPM)都需要具备系统设计的基础知识。从历史上看，系统设计基础知识通常是软件工程师在面试时的要求，而TPM不受此期望的约束。然而，现在趋势正在发生变化。作为TP... 查看详情

springmvc--必知必会(代码片段)

　　SpringMVC基于模型--视图--控制器（Model-View-Controller，MVC）模式实现，属于SpringFrameWork的后续产品，已经融合在SpringWebFlow里面。它通过一套注解，让一个简单的Java类成为处理请求的控制器，而无需实现任何接口。同时它还支持... 查看详情

scala必知必会(代码片段)

文章目录入门概述安装JavaVSScalaval和var基本数据类型lazy在Scala中的应用开发工具IDEAMaven函数方法定义默认参数命名参数可变参数条件语句循环语句面向对象概述类的定义和使用抽象类伴生类和伴生对象case和trait集合数组ListSetMapOpt... 查看详情

读书笔记sql必知必会(代码片段)

章节标题页数进度完成时间1了解SQL1~9100%2022-04-08 2检索数据SELECT10~22100%2022-04-103排序检索数据ORDERBY23~30100%2022-04-114过滤数据WHERE31~38100%2022-04-115高级数据过滤（组合WHERE，NOT，IN）39~49100%2022-04-166用 查看详情

大数据必知必会：hadoop单机环境安装(代码片段)

(大数据必知必会：Hadoop（1）单机环境安装)安装前准备操作系统准备本次安装采用的操作系统是Ubuntu20.04。更新一下软件包列表。sudoapt-getupdate安装Java8+使用命令安装Java8。sudoapt-getinstall-yopenjdk-8-jdk配置环境变量。vi~/.bashrcexportJAVA... 查看详情

8000字概括精髓，pandas必知必会50例(代码片段)

本篇我们继续前面pandas系列教程的探讨，今天小编会介绍pandas库当中一些非常基础的方法与函数，希望大家看了之后会有所收获，另外呢，大家要是希望小编写什么样子类型的文章，也可以在评论区留言，... 查看详情

1w+字概括精髓，pandas中必知必会50例(代码片段)

本篇我们继续前面pandas系列教程的探讨，今天我会介绍pandas库当中一些非常实用的方法与函数，希望大家看了之后会有所收获，喜欢本文点赞支持，欢迎收藏学习，文末提供技术交流，欢迎畅聊！准备... 查看详情

大数据必知必会：hadoop高可用集群安装(代码片段)

(大数据必知必会：Hadoop（4）高可用集群安装)安装前准备高可用集群环境下，至少需要3台服务器，这里准备5台。IP地址主机名称角色10.0.0.5node1JournalNode、NameNode、ResourceManager10.0.0.6node2JournalNode、NameNode、ResourceManager10.0.0.7node3Journa... 查看详情

13条必知必会&&测试(代码片段)

1.13条必知必会<1>all():查询所有结果<2>filter(**kwargs):它包含了与所给筛选条件相匹配的对象<3>get(**kwargs):返回与所给筛选条件相匹配的对象，返回结果有且只有一个，如果符合筛选条件的对象超过一个或者没有都会抛... 查看详情

大数据linux必知必会-02(代码片段)

8网络配置8.1静态ip设置配置文件地址：/etc/sysconfig/network-scripts/ifcfg-ens33修改如下原来改成reboot重启下生效8.2修改linux主机名修改配置文件下的主机名/etc/hostname[root@hadoop~]#vim/etc/hostname修改映射文件/etc/sysconfig/network[root@hadoop~]#vim/etc 查看详情

mysql必知必会（初级篇）(代码片段)

mysql1.基本概念2.SQL语言2.1DCL(数据控制语言)2.1.1创建用户2.1.2使用grant命令给用户授权2.1.3使用revoke命令撤销权限2.2DDL(数据定义语言)2.2.1mysql常用约束类型2.2.2使用alter命令修改表结构2.2.3使用drop命令删除表2.3DML(数据操纵语言)2.3.1使... 查看详情