一、popstate用来做什么的？
简而言之就是HTML5新增的用来控制浏览器历史记录的api。

二、过去如何操纵浏览器历史记录？
window.history对象，该对象上包含有length和state的两个值，在它的__proto__上继承有back、forward、go等几个功能函数
在popstate之前，我们可以利用back、forward、go对history进行后退和前进操作。
例如：
history.back(); (后退一步，使用history.go(-1)也可实现后退效果)
弊端：只能操作前进后退，但是无法控制前进后要去哪，history.length都只会维持原来的状态

三、popstate的怎么用？
HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。

pushState、replaceState两者用法差不多。

使用方法：

history.pushState(data,title,url);
//其中第一个参数data是给state的值；第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；第三个参数url是你想要去的链接；

replaceState用法类似，例如：history.replaceState("首页","",location.href+ "#news");

两者区别：pushState会改变history.length，而replaceState不改变history.length

通过下图我们可以对比看出pushState和replaceState的差别（注意看history.length的变化）：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>图解用HTML5的popstate如何玩转浏览器历史记录</title>

</head>

<body>

<span class="js-news">新闻</span>

<span class="js-music">音乐</span>

<script>

    var locationHref = location.href;

    document.addEventListener("click", function (event) {

        var target = event.target;

        if (target.className == "js-news") {

            history.pushState("首页", "", locationHref + "#news");

        } else if (target.className == "js-music") {

            history.pushState("音乐", "", locationHref + "#music");

        }

    });

    /*    document.addEventListener("click",function(event){

     var target = event.target;

     if(target.className == "js-news"){

     history.replaceState("首页","",locationHref + "#news");

     }else if(target.className == "js-music"){

     history.replaceState("音乐","",locationHref + "#music");

     }

     });*/

    window.addEventListener("popstate", function () {

        console.log(history.state);

    })

</script>

</body>

</html>

四、监听浏览器状态（popstate）变化事件
可以理解为监听浏览器后退、前进的操作，只要后退或者前进就会触发。在上面的demo中，我们预先做了如下操作：打开页面→点击“新闻”→点击“音乐”→再点击“新闻”，产生了4个history记录。然后监听浏览器后退和前进的状态变化，如下图所示：

图解用HTML5的popstate如何玩转浏览器历史记录的更多相关文章

  1. IT兄弟连 HTML5教程 设置IE9以下版本浏览器支持HTML5

    HTML2.HTML5刚发布时由于各浏览器之间的标准不统一,开发者的时间都浪费在解决Web浏览器之间的兼容性上.但由于W3C和WHATWG对HTML5新版本的制定,以及近年来对HTML5的使用,再加上 ...

  2. HTML5网页如何让所有的浏览器都能识别语义元素标签样式

    浏览器对语义元素的支持情况 如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未 ...

  3. 8个经典的HTML5游戏在线试玩及源码学习

    原文地址:http://www.oschina.net/news/32364/html5-games 游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好 ...

  4. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  5. HTML5[2]:使用viewport控制手机浏览器布局

    基本 <meta name="viewport" content="width=device-width, initial-scale=1">192 ...

  6. HTML5的特殊标签与IE浏览器的兼容

    注释标签 ruby: 行级元素 横排显示 试图写多个汉字和注释,需要多个ruby. 直接上代码: - css样式: 页面效果: 重点标记 mark: 以灰常黄的黄色来重点标记 页面代码: 类似于进度条 ...

  7. html5 兼容参考文档 与 浏览器hack兼容参考文档

    移动端兼容参考文档 http://mobilehtml5.org/ 浏览器hack http://browserhacks.com/ 附上部分截图

  8. 《Python黑帽子：黑客与渗透测试编程之道》 玩转浏览器

    基于浏览器的中间人攻击: #coding=utf-8 import win32com.client import time import urlparse import urllib data_rec ...

  9. 简略图解：输入 url 到出现页面，浏览器做了什么？

    应该有很多前端开发人员都思考过这么一个问题:从输入 URL 到页面加载完成,中间都做发生了什么? 这个问题涉及的面非常广,每个涉及的点又很深入.从触屏/键盘如何到 CPU?CPU 如何到系统内核?如何 ...

随机推荐

  1. 20155235 2016-2017-2 《Java程序设计》第4周学习总结

    20155235 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章知识点: 何为继承 继承共同行为 多态与is-a 重新定义行为 抽象方法.抽象类 继承 ...

  2. 20155302 2016-2017-2 《Java程序设计》第3周学习总结

    20155302 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 两个基本的标准类:java.util.Scanner与java.math.BigDecima ...

  3. 20155307 实验一《Java开发环境的熟悉》实验报告

    (一)命令行下Java程序开发 题目:实现Fibonacci数列功能,并进行测试 命令行下的程序截图 上传到了码云: 遇到的问题? 可以直接使用Javac,不加环境变量也行,但是文件的名字与类名必须一 ...

  4. 20155308 2016-2017-2《Java程序设计》课程总结

    20155308 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:回答"我专业吗.我的老师.师生关系.代码问题"四个问题. 预备作业2 ...

  5. 20155328 2016-2017-2 《Java程序设计》第四周学习总结

    学号 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 继承:避免多各类间重复定义行为,extends关键字表示继承后再扩充原本没有的行为.如果没有使用exte ...

  6. 虚拟机与Linux的初体验

    很早的时候就知道虚拟机这个神奇东西的存在,但也仅仅是只闻其名,未见其身.后来在信息安全素质教育的这门课程上,为了做木马实验.暴力破解实验以及邮件窃取实验,这才比较直接的接触到了虚拟机.当我看着在另一个 ...

  7. 20155339《java程序设计》第一次实验报告

    20155339<java程序设计>第一次实验报告 实验一 java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的java程序: 2.使用IDEA编辑.编译.运行.调试java程 ...

  8. #ifdef 支持Mac #ifndef 支持Windows #if defined (Q_OS_WIN) 应该可以再两个系统通用

    //mac qt可以运行 #ifdef Q_OS_MAC qDebug()<<QSysInfo::MacintoshVersion; #endif //Mac不运行 #ifndef Q_O ...

  9. 【转载】Ogre:Beginner Tutorial 1: SceneNode, Entity,和SceneManager 结构

    原文:Beginner Tutorial 1: SceneNode, Entity,和SceneManager 结构   先决条件 这个教程假设你有C++编程的基础并且可以配置并编译OGRE应用程序 ...

  10. C#：通过NuGet程序包下载CefSharp来加载谷歌浏览器

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 首先我讲明一下我要做的,公司有个C# wpf的项目需要我把一个开发好的网页嵌入到客户端当中,由于种种原因,我放 ...