概述

虽然html5的history api是H5专门用来解决记录历史记录和单页面的方法，但是很多老式的浏览器并不支持它，所以一般遇到老式的浏览器会做一个polyfill使用之前的hashchange方法。

另一方面，html5的history api在实际使用的时候会和之前的hashchange方法的用法有稍微的不同。

说明

  1. 主要使用history.pushState改变url，它的调用格式是history.pushState(data, title, path);，其中data是一个自己定义的数据对象，title是标题，现在大部分浏览器还不支持，path是路径。
  2. 用这个方法改变url的时候，页面并不刷新。
  3. 用这个方法改变url的时候，并不会触发onpopstate事件，只有在使用history.go或者history.back等方法的时候才会触发onpopstate事件，比如说浏览器按倒退键。(这一点和hashchange方法不同)
  4. 触发onpopstate事件的时候可以用event.state获得data这个对象。

解决方案

SPA怎么路由

具体和hashchange方法类似，唯一不同的地方是，在用history.pushState改变url的时候，由于不会触发onpopstate事件，所以一些函数要放在history.pushState改变url之后处理(以前是直接由hashchange事件处理)。

复制url并在另一个页面打开

如果是用#符号的话，那么方法类似hashchange。

但是新的history api可以摒弃#字符，比如说react-router里面就是这么做的，具体怎么解决我还没有弄清楚。

例子

下面是我编写的一段测试代码供大家参考。直接复制并存为html文件，然后在服务器上打开即可。(因为history api需要一个域名，可以是locahost)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script type="text/javascript">

    //hashchange事件，如果有hash值，则输出到oDiv。

    function onPopstate(event) {

      if(history.state) {

        console.log(history.state.next);

      }

      if(history.state && history.state.next === 1){

          $('#div1').hide();

          $('#div2').show();

          $('#div3').hide();

        } else if(history.state && history.state.next === 2) {

          $('#div1').hide();

          $('#div2').hide();

          $('#div3').show();

        } else {

          $('#div1').show();

          $('#div2').hide();

          $('#div3').hide();

        }

    }

    //页面加载

    window.onload=function (){

        //加载时触发一次hashchange事件

        $(window)

            .bind( 'popstate', onPopstate )

            .trigger( 'popstate' );

        //点击事件，把数组装在hash里面

        document.getElementById("input1").onclick=function(){

            history.pushState({next: 1}, null, 'next1.html');

            $('#div1').hide();

            $('#div2').show();

            $('#div3').hide();

        };

        document.getElementById("input2").onclick=function(){

            history.pushState({next: 2}, null, 'next2.html');

            $('#div1').hide();

            $('#div2').hide();

            $('#div3').show();

        };

        document.getElementById("input3").onclick=function(){

            history.pushState('', null, 'index.html');

            $('#div1').show();

            $('#div2').hide();

            $('#div3').hide();

        };

    }

    </script>

</head>

<body>

    主页=模块1，模块2页=模块2，模块3页=模块3

    <input type="button" value="去模块2页" id="input1" />

    <input type="button" value="去模块3页" id="input2" />

    <input type="button" value="去主页" id="input3" />

    <div id="div1">模块111111111111111111</div>

    <div id="div2">模块222222222222222222</div>

    <div id="div3">模块333333333333333333</div>

</body>

</html>

其它

  1. 单页面路由实际上和我的demo不一样，不太运用history.pushState里面的data参数，而是直接分析url做正则匹配，不过这个data参数在别的地方有很大用处。
  2. 一般的路由和我的demo里面不一样，不是用按钮而是用a链接，那个时候直接在click的时候阻止默认跳转即可。
  3. history.pushState里面的data参数储存在sessionStorage里面。

锚接口(下)——html5的history api的更多相关文章

  1. 使用HTML5的History API

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  2. 利用HTML5的History API实现无刷新跳转页面初探

    HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...

  3. 有关html5的history api

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  4. 锚接口(上)——hashchange api 和 $.uriAnchor

    概述 这是我在单页Web应用这本书上看到的方法,并深入的研究了一下,把结果记录在下面,供以后开发时参考,相信对其它人也有用. 说明一下,这个方法已经过时了,H5有更新的方法:history api,我 ...

  5. Html5 history Api简介

    一. Html4的History API back() 后退,跟按下“后退”键是等效的. forward() 前进,跟按下“前进”键是等效的. go() 用法:history.go(x):在历史的范围 ...

  6. HTML5 History API让ajax能回退到上一页

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  7. window.history的跳转实质－HTML5 history API 解析

    在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...

  8. 林大妈的JavaScript进阶知识（三）：HTML5 History API

    HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...

  9. 学习HTML5 history API

    html5 在 history 对象上添加几个新的方法.事件.属性,用以增强开发者对于浏览器历史记录的控制.大体上说,新的API可以帮助我们在无刷新的情况下改变浏览器的url,新增或者替换之前的历史记 ...

随机推荐

  1. 页面JS实现按钮点击增加输入框

    学习记录 https://www.tuicool.com/articles/byUf2qe

  2. python--第十天总结（IO多路复用）

    服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking IO):默认创建的s ...

  3. 转：centos查看实时网络带宽占用情况方法

    Linux中查看网卡流量工具有iptraf.iftop以及nethogs等,iftop可以用来监控网卡的实时流量(可以指定网段).反向解析IP.显示端口信息等. centos安装iftop的命令如下: ...

  4. 515. Find Largest Value in Each Tree Row查找一行中的最大值

    ［抄题］: You need to find the largest value in each row of a binary tree. Example: Input: 1 / \ 3 2 / \ ...

  5. 前端移动开发之rem

    前言 作为一名前端工程师,我们不仅要会PC端开发,还要会移动端开发,而且现在移动端占据主要流量,所以掌握移动端开发的技能更是必须的. 那么进行移动端的开发,什么是必须,我们想要的效果是什么? 自适应. ...

  6. 微信小程序之 -----事件

    事件分类      1. 冒泡事件:     当一个组件上的事件被触发后,该事件会向父节点传递.      2. 非冒泡事件:   当一个组件上的事件被触发后,该事件不会向父节点传递.   常见的冒泡 ...

  7. 拜托！面试请不要再问我Spring Cloud底层原理[z]

    [z]https://juejin.im/post/5be13b83f265da6116393fc7 拜托!面试请不要再问我Spring Cloud底层原理 欢迎关注微信公众号:石杉的架构笔记(id: ...

  8. 选择困难症的福音——团队Scrum冲刺阶段-Day5（补发 那天csshow）

    选择困难症的福音--团队Scrum冲刺阶段-Day 5 今日进展 编写提问部分 游戏分类的界面 将之前错误的图标改正 关于我们的俄罗斯方块,今天有了新的进展 NextBlockView(定义了下一个方 ...

  9. Python中的urllib

    urllib提供了一系列URL的功能. Get urllib的request模块可以非常方便的抓取URL内容,也就是发送一个GET请求到指定的页面,然后返回HTTP响应: 例如,对豆瓣的一个URLht ...

  10. python 数据可视化 -- 读取数据

    从 CSV 文件中读取数据(CSV) import sys import csv # python 内置该模块 支持各种CSV文件 file_name = r"..\ch02_data\ch ...