http://www.web008.net

前生今世,与浏览器历史堆栈管理

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景逸SUVL。

History API回顾

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

何以介绍History API ?

在此篇文章中,大家将领会HTML 5中History API的来自。早前,大家日常应用散列值来改换页面内容,极度是那多少个对页面特别主要性的原委。因为从没刷新,所以对于单页面应用,退换其U奥迪Q3L是不可能的。别的,当您改动ULacrosseL的散列值值,它对浏览器的历史记录未有任何影响。

下一场,未来对此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奥迪Q3L是不是早就存在地址列表中。更珍视的是,它不会另行加载页面。

八个法子的首要差别正是跋山涉水的近义词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的上两个页面)

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。