文档章节

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

o
 osc_odyg6b92
发布于 2018/07/13 14:15
字数 679
阅读 17
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

一、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>

复制代码
<!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记录。然后监听浏览器后退和前进的状态变化,如下图所示:

 

 

 

 

 

转载自:https://www.cnblogs.com/shuiyi/p/5115188.html

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
5.4K
8
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.7K
1
在多个浏览器上运行脚本--Queen

假设你想和朋友们玩这么个游戏:你写下某个数字,然后让朋友们猜你写的是什么数字。你的朋友们将不断的给你一些猜测的数字,直到猜中为止。 现在想象你的朋友都是使用的浏览器,这个游戏就相...

匿名
2013/01/24
4.4K
1
HTTPS切换工具--HttpsSwitcher

HttpsSwitcher 是一个帮你进行 HTTPS 切换的 Chrome 插件,本工具可以帮你尝试使用https打开指定的域名,点击本插件的浏览器图标后会自动切换本标 签页的http/https状态,并且会记住你的选择...

leehorsley
2013/01/26
910
0
WebUI自动化测试框架--Dagger

Dagger是网易杭州研究院QA团队开发的一个轻量级、运行稳定的WebUI自动化测试框架,主要基于Selenium及TestNg可以认为是对Selenium进行二次封装的一个框架(俗称 造轮子 )。之所以把这个轮子...

ChenKan
2013/03/05
2.8W
6

没有更多内容

加载失败,请刷新页面

加载更多

如何使用pip升级所有Python软件包? - How to upgrade all Python packages with pip?

问题: Is it possible to upgrade all Python packages at one time with pip ? 是否可以通过pip一次升级所有Python软件包? Note : that there is a feature request for this on the off......

法国红酒甜
9分钟前
0
0
活体检测+合成图鉴别面前,人脸“照片活化”黑产攻击一秒被擒

本文作者:y****n 如今,随着人脸技术的日趋成熟,新兴娱乐文化得到了极大的推动,尤其是随着 DeepFake、FaceSwap 等人脸编辑及生成技术的发展,虚拟主播、人脸合成带给人们全新的体验,但同...

百度开发者中心
昨天
0
0
如何在SQL Server中将多行文本合并为单个文本字符串?

问题: Consider a database table holding names, with three rows: 考虑一个包含名称的数据库表,该表具有三行: PeterPaulMary Is there an easy way to turn this into a single str......

富含淀粉
39分钟前
9
0
在JavaScript中生成特定范围内的随机整数? - Generating random whole numbers in JavaScript in a specific range?

问题: 如何可以生成两个指定的变量之间的随机整数在JavaScript中,例如x = 4和y = 8将输出任何的4, 5, 6, 7, 8 ? 解决方案: 参考一: https://stackoom.com/question/6PRz/在JavaScript中...

fyin1314
今天
8
0
Vim清除最后一个搜索突出显示 - Vim clear last search highlighting

问题: Want to improve this post? 想要改善这篇文章吗? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. 提供此问题......

技术盛宴
今天
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部