与浏览器历史仓库管理,前生当代

History API 与浏览器历史仓库管理

2016/07/25 · HTML5 ·
History,
HTML5,
浏览器

本文小编: 伯乐在线 –
欲休
。未经作者许可,禁止转发!
款待出席伯乐在线 专辑小编。

活动端支出在有个别场景中装有特殊须求,如为了坚实客商体验和加速响应速度,平时在某个工程使用SPA框架结构。守旧的单页应用基于url的hash值进行路由,这种达成不设有宽容性难题,可是劣点也许有–针对不支持onhashchange属性的IE6-7必要设置沙漏不断检查hash值改换,质量上而不是很和煦。

而近期,在运动端支付中HTML5规范给我们提供了二个History接口,使用该接口能够随便支配历史记录。本文并不详细介绍History接口,而是研讨History接口如何影响浏览器历史仓库,而且应用这几个规律应用到实际的实在业务中,提议两种历史记录保存攻略,使路由逻辑更明显,让SPA更易于。

HTML 5 History API的”前生今世”

2014/10/23 · HTML5 ·
HTML5

原来的书文出处:
tuts+   译文出处:记不清浅思的博客(@dwido)   

History是风趣的,不是啊?在前头的HTML版本中,我们对浏览历史记录的操作十三分有限。我们能够来回使用能够利用的办法,但那就是全体大家能做的了。

唯独,利用HTML 5的History
API,大家得以越来越好的主宰浏览器的历史记录了。比如:大家得以加多一条记下到历史记录的列表中,恐怕在向来不刷新时,能够立异鸿基土地资金财产址栏的U君越L。

History API回顾

HTML5 History
API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。

干什么介绍History API ?

在那篇文章中,大家将通晓HTML 5中History
API的来源。以前,我们平时应用散列值来改换页面内容,非常是那多少个对页面相当重大的原委。因为从没刷新,所以对于单页面应用,改动其U陆风X8L是不容许的。另外,当您退换U揽胜极光L的散列值值,它对浏览器的历史记录未有另外影响。

接下来,未来对此HTML 5的History
API来讲,这个都以足以自由实现的,可是由于单页面应用没须求选择散列值,它大概必要卓殊的开垦脚本。它也同意大家用一种对SEO友好的主意创建新利用。其它,它能减小带宽,可是该怎么证明呢?

在篇章中,笔者将用History API开辟二个单页应用来证明上述的标题。

那也代表笔者不可能不先在首页加载须要的能源。未来始于,页面仅仅加载需求的内容。换句话说,应用并不是一开首就加载了整整的开始和结果,在央浼第贰个使用内容时,才会被加载。

留心,您需求实行一些劳务器端编码只提供部分能源,而不是全部的页面内容。

pushState

history.pushState(stateObject, title, url),富含多个参数。

先是个参数用于存款和储蓄该url对应的境况对象,该目的可在onpopstate事件中获取,也可在history对象中收获。

其次个参数是标题,最近浏览器并未有达成。

其五个参数则是设定的url。平日安装为相对路线,假若设置为相对路线时须求保障同源。

pushState函数向浏览器的历史仓库压入叁个url为设定值的笔录,并改变历史商旅的当下指针至栈顶。

>
在此间作者使用历史饭馆和脚下指针,用以申明浏览器对历史记录的管理攻略。文书档案中并未应用那样的词汇,作者为了更形象的牵线接口对浏览器历史记录的熏陶,使用那样的叙述,如有不当之处请立即提出(可是当下以那套模型为根基的逻辑达成中平昔不出现谬论)。

浏览器帮忙

在写这篇文章的时候,各主流浏览器对History
API的支撑是非常不错的,能够点击这里查看其扶助情状,这一个链接会告诉您帮助的浏览器,并使用在此以前,总有美好的施行来检查评定扶助的特定功效。

为了用产生格局分明浏览器是或不是帮助这一个API,能够用下边包车型客车一站式代码查证:

XHTML

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

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

别的,小编提出参谋一下那篇文章:Detect Support for Various HTML5
Features.(ps:后续会翻译)

设若你是用的现世浏览器,能够用上面包车型大巴代码:

XHTML

if (Modernizr.history) { // History API Supported }

1
2
3
if (Modernizr.history) {
    // History API Supported
}

倘使你的浏览器不支持History
API,能够使用history.js代替。

replaceState

该接口与pushState参数一样,含义也同等。唯一的界别在于replaceState是替换浏览器历史饭店的当下历史记录为设定的url。供给当心的是,replaceState不会转移浏览器历史客栈的近期指针。

使用History

HTML 5提供了多个新措施:

1、history.pushState();               
2、history.replaceState();

三种艺术都同意我们增多和更新历史记录,它们的行事原理同样并且可以加上数量一样的参数。除了艺术之外,还应该有popstate事件。在后文上校介绍怎么利用和怎么时候使用popstate事件。

pushState()和replaceState()参数同样,参数表达如下:

1、state:存款和储蓄JSON字符串,能够用在popstate事件中。

2、title:今后好多浏览器不帮忙还是忽视那么些参数,最佳用null代替

3、url:跋扈有效的U揽胜极光L,用于立异浏览器的地址栏,并不在乎U酷路泽L是或不是曾经存在地址列表中。更关键的是,它不会另行加载页面。

七个法子的机要分裂正是:pushState()是在history栈中增添三个新的条目款项,replaceState()是替换当前的记录值。倘诺您还对那些有吸引,就用部分演示来证实那几个差别。

万一大家有四个栈块,一个标志为1,另三个标识为2,你有第多少个栈块,标志为3。当推行pushState()时,栈块3将被加多到已经存在的栈中,因而,栈就有3个块栈了。

一致的如若情景下,当实行replaceState()时,将要块2的仓库和停放块3。所以history的记录条数不改变,也正是说,pushState()会让history的数目加1.

相比结实如下图:

澳门新葡亰平台官网 1

 

到此,为了调节浏览器的历史记录,大家忽视了pushState()和replaceState()的平地风波。不过若是浏览器总括了过多的不成记录,客户或然会被重定向到这几个页面,只怕也不会。在这种景况下,当客户使用浏览器的向上和滞后导航按键时就能时有产生意料之外的标题。

固然当我们采用pushState()和replaceState()进行拍卖时,期望popstate事件被触发。但实在,意况并非那般。相反,当你浏览会话历史记录时,不管您是点击前进大概后退按键,如故采取history.go和history.back方法,popstate都会被触发。

In WebKit browsers, a popstate event would be triggered after
document’s onload event, but Firefox and IE do not have this
behavior.(在WebKit浏览器中,popstate事件在document的onload事件后触发,Firefox和IE没有这种行为)。

onpopstate

该事件是window的属性。该事件会在调用浏览器的前进、后退以及奉行history.forward、history.back、和history.go触发,因为那个操作有一个共性,即修改了历史旅舍的当下指针。在不转移document的前提下,一旦当前线指挥部针退换则会触发onpopstate事件。

Demo示例

HTML:

XHTML

<div class=”container”> <div class=”row”> <ul class=”nav
navbar-nav”> <li><a href=”home.html”
class=”historyAPI”>Home</a></li> <li><a
href=”about.html” class=”historyAPI”>About</a></li>
<li><a href=”contact.html”
class=”historyAPI”>Contact</a></li> </ul>
</div> <div class=”row”> <div class=”col-md-6″>
<div class=”well”> Click on Links above to see history API usage
using <code>pushState</code> method. </div>
</div> <div class=”row”> <div class=”jumbotron”
id=”contentHolder”> <h1>Home!</h1> <p>Lorem Ipsum
is simply dummy text of the printing and typesetting industry.</p>
</div> </div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
    <div class="row">
        <ul class="nav navbar-nav">
            <li><a href="home.html" class="historyAPI">Home</a></li>
            <li><a href="about.html" class="historyAPI">About</a></li>
            <li><a href="contact.html" class="historyAPI">Contact</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="well">
                Click on Links above to see history API usage using <code>pushState</code> method.
            </div>
        </div>
        <div class="row">  
            <div class="jumbotron" id="contentHolder">
                <h1>Home!</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
    </div>
</div>

JavaScript:

JavaScript

<script type=”text/javascript”>
jQuery(‘document’).ready(function(){ jQuery(‘.historyAPI’).on(‘click’,
function(e){ e.preventDefault(); var href = $(this).attr(‘href’); //
Getting Content getContent(href, true);
jQuery(‘.historyAPI’).removeClass(‘active’); $(this).addClass(‘active’);
}); }); // Adding popstate event listener to handle browser back button
window.addEventListener(“popstate”, function(e) { // Get State value
using e.state getContent(location.pathname, false); }); function
getContent(url, addEntry) { $.get(url) .done(function( data ) { //
Updating Content on Page $(‘#contentHolder’).html(data); if(addEntry ==
true) { // Add History Entry using pushState history.pushState(null,
null, url); } }); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
    jQuery(‘document’).ready(function(){
 
        jQuery(‘.historyAPI’).on(‘click’, function(e){
            e.preventDefault();
            var href = $(this).attr(‘href’);
 
            // Getting Content
            getContent(href, true);
 
            jQuery(‘.historyAPI’).removeClass(‘active’);
            $(this).addClass(‘active’);
        });
 
    });
 
    // Adding popstate event listener to handle browser back button
    window.addEventListener("popstate", function(e) {
 
        // Get State value using e.state
        getContent(location.pathname, false);
    });
 
    function getContent(url, addEntry) {
        $.get(url)
        .done(function( data ) {
 
            // Updating Content on Page
            $(‘#contentHolder’).html(data);
 
            if(addEntry == true) {
                // Add History Entry using pushState
                history.pushState(null, null, url);
            }
 
        });
    }
</script>

澳门新葡亰平台官网 ,Demo 1:HTML 5 History API – pushState

野史条款在浏览器中被总结,而且能够很轻巧的施用浏览器的升高和向下按键。View
Demo 
(ps:你在点击demo1的选项卡时,其记录会被增加到浏览器的历史记录,当点击后退/前进按键时,能够回来/跳到您前边点击的选项卡对应的页面)

Demo 2:HTML 5 History API – replaceState

野史条款在浏览器中被更新,况且无法选取浏览器的开垦进取和向下按钮实行浏览。View
Demo 
(ps:你在点击demo1的选项卡时,其记录会被交换当前浏览器的历史记录,当点击后退/前进开关时,不可能回去/跳到你前面点击的选项卡对应的页面,而是重返/跳到您进去demo2的上二个页面)

发表评论

电子邮件地址不会被公开。 必填项已用*标注