澳门新萄京深切搜求HTML5的History,前生现代
分类:澳门新萄京最大平台

HTML 5 History API的”前生今世”

2014/10/23 · HTML5 · HTML5

原稿出处: tuts    译文出处:忘记浅思的博客(@dwido卡塔 尔(阿拉伯语:قطر‎   

History是幽默的,不是吧?在在此之前的HTML版本中,大家对浏览历史记录的操作十二分轻巧。大家能够来回使用能够动用的章程,但那便是漫天大家能做的了。

不过,利用HTML 5的History API,大家得以更加好的决定浏览器的历史记录了。比如:我们得以增添一条记下到历史记录的列表中,或许在未有刷新时,能够立异鸿基土地资金财产址栏的U奥德赛L。

深刻商量HTML5的History API,html5history

那篇文章首要介绍了深刻探寻HTML5的History API,入眼陈述了HTML5中新的办法history.pushState()和history.replaceState(),供给的心上人能够参见下

History是风趣的,不是啊?在事先的HTML版本中,大家对浏览历史记录的操作非常轻巧。我们得以来回使用能够动用的措施,但那正是漫天大家能做的了。

  可是,利用HTML 5的History API,大家得以越来越好的决定浏览器的历史记录了。比如:大家得以增加一条记下到历史记录的列表中,也许在没有刷新时,能够改进鸿基土地资产址栏的UTiguanL。
  为何介绍History API ?

  在这里篇作品中,我们将了然HTML 5中History API的来源于。以前,大家平时接收散列值来改善页面内容,非常是那个对页面特别重大的剧情。因为从没刷新,所以对于单页面应用,改换其U陆风X8L是不容许的。别的,当您转移UHighlanderL的散列值值,它对浏览器的历史记录未有别的影响。

  然后,现在对此HTML 5的History API来讲,那么些都以可以私下跌成的,不过出于单页面应用没供给运用散列值,它大概供给相当的开支脚本。它也同意大家用后生可畏种对SEO友好的措施确立新利用。别的,它能减小带宽,可是该怎么申明呢?

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

  那也意味着自个儿必须要先在首页加载供给的财富。现在开班,页面仅仅加载须求的内容。换句话说,应用并非一同首就加载了总体的内容,在乞请第一个利用内容时,才会被加载。

  注意,您必要实施一些服务器端编码只提供一些财富,实际不是完好的页面内容。
  浏览器扶助

  在写这篇小说的时候,各主流浏览器对History API的扶持是特别正确的,能够点击这里查看其扶植处境,那个链接会告诉您协理的浏览器,并利用以前,总有手不释卷的奉行来检查实验扶助的一定成效。

  为了用形成格局明确浏览器是或不是援救那几个API,能够用下边包车型大巴一站式代码核查:  

XML/HTML Code复制内容到剪贴板

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

  其余,作者提出参谋一下那篇小说:Detect Support for Various HTML5 Features.(ps:后续会翻译)

  如若你是用的现代浏览器,能够用上边包车型地铁代码:  

XML/HTML Code复制内容到剪贴板

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

  假诺你的浏览器不帮忙History API,能够运用history.js替代。
  使用History

  HTML 5提供了多少个新点子:

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

  二种格局都允许大家增加和翻新历史记录,它们的劳作规律相近并且能够增添数量相似的参数。除了艺术之外,还应该有popstate事件。在后文旅长介绍怎么使用和怎么着时候使用popstate事件。

  pushState()和replaceState()参数相似,参数表达如下:

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

  2、title:以后超越四分之风度翩翩浏览器不扶助依然忽略那个参数,最佳用null替代

  3、url:大肆有效的U奥德赛L,用于更新浏览器的地址栏,并不留意UENVISIONL是或不是早就存在地址列表中。更器重的是,它不会重新加载页面。

  三个点子的关键不一样正是: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未有这种表现卡塔尔国。
  Demo示例

  HTML:  

XML/HTML Code复制内容到剪贴板

  1. <div class="container">  
  2.     <div class="row">  
  3.         <ul class="nav navbar-nav">  
  4.             <li><a href="home.html" class="historyAPI">Home</a></li>  
  5.             <li><a href="about.html" class="historyAPI">About</a></li>  
  6.             <li><a href="contact.html" class="historyAPI">Contact</a></li>  
  7.         </ul>  
  8.     </div>  
  9.     <div class="row">  
  10.         <div class="col-md-6">  
  11.             <div class="well">  
  12.                 Click on Links above to see history API usage using <code>pushState</code> method.   
  13.             </div>  
  14.         </div>  
  15.         <div class="row">      
  16.             <div class="jumbotron" id="contentHolder">  
  17.                 <h1>Home!</h1>  
  18.                 <p>Lorem Ipsum is simply dummy text of the <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" href="" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">printing</span></a></span> and typesetting industry.</p>  
  19.             </div>  
  20.         </div>  
  21.     </div>  
  22. </div>  

  JavaScript:

XML/HTML Code复制内容到剪贴板

  1. <script type="text/<span style="width: auto; height: auto; float: none;" id="1_nwp"><a style="text-decoration: none;" mpid="1" target="_blank" href="" id="1_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">javascript</span></a></span>">  
  2.     jQuery('document').ready(function(){   
  3.              
  4.         jQuery('.historyAPI').on('click', function(e){   
  5.             e.preventDefault();   
  6.             var href = $(this).attr('href');   
  7.                  
  8.             // Getting Content   
  9.             getContent(href, true);   
  10.                  
  11.             jQuery('.historyAPI').removeClass('active');   
  12.             $(this).<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="text-decoration: none;" mpid="2" target="_blank" href="" id="2_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">add</span></a></span>Class('active');   
  13.         });   
  14.              
  15.     });   
  16.          
  17.     // Adding popstate event listener to handle browser back button    
  18.     window.addEventListener("popstate", function(e) {   
  19.              
  20.         // Get State value using e.state   
  21.         getContent(location.pathname, false);   
  22.     });   
  23.          
  24.     function getContent(url, addEntry) {   
  25.         $.get(url)   
  26.         .done(function( <span style="width: auto; height: auto; float: none;" id="3_nwp"><a style="text-decoration: none;" mpid="3" target="_blank" href="" id="3_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data</span></a></span> ) {   
  27.                  
  28.             // Updating Content on Page   
  29.             $('#contentHolder').html(data);   
  30.                  
  31.             if(<span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" target="_blank" href="" id="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">add</span></a></span>Entry == true) {   
  32.                 // Add History Entry using pushState   
  33.                 history.pushState(null, null, url);   
  34.             }   
  35.                  
  36.         });   
  37.     }   
  38. </script>  

  总计(ps:喜欢那多个字~^_^~)

  HTML 5中的History API 对Web应用具备相当大的影响。为了更易于的始建有功用的、对SEO友好的单页面应用,它移除了对散列值的依附。

API,html5history 这篇文章首要介绍了深深斟酌HTML5的History API,重视陈说了HTML5中新的法子history.pushState()和history.replaceSt...

缘何介绍History API ?

在此篇小说中,大家将领悟HTML 5中History API的来源。在此以前,我们日常应用散列值来更动页面内容,特别是那么些对页面非常重大的剧情。因为未有刷新,所以对于单页面应用,改换其UKoleosL是不容许的。此外,当你改造URubiconL的散列值值,它对浏览器的历史记录未有此外影响。

下一场,今后对此HTML 5的History API来讲,这一个都以足以私下完成的,不过出于单页面应用没必要运用散列值,它或然须要万分的开垦脚本。它也允许大家用生龙活虎种对SEO友好的方法创建新应用。别的,它能压缩带宽,不过该怎么评释呢?

在文章中,作者将用History API开辟多个单页应用来验证上述的主题材料。

那也意味本人必得先在首页加载需要的能源。以后始发,页面仅仅加载必要的内容。换句话说,应用并非意气风发起头就加载了上上下下的开始和结果,在乞请第2个使用内容时,才会被加载。

在乎,您要求实行一些服务器端编码只提供一些财富,而不是完整的页面内容。

浏览器协理

在写那篇作品的时候,各主流浏览器对History API的援救是不行不易的,能够澳门新萄京深切搜求HTML5的History,前生现代。点击这里查看其扶持情状,这么些链接会告诉您帮助的浏览器,并运用此前,总有手不释卷的实行来检查测验扶植的特定功能。

为了用形成格局显明浏览器是不是帮衬那个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代替。

使用History

HTML 5提供了七个新措施:

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

三种办法都同意大家抬高和立异历史记录,它们的办事原理相通並且可以加上数量相符的参数。除了艺术之外,还应该有popstate事件。在后文中将介绍怎么使用和哪些时候使用popstate事件。

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

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

2、title:今后超过58%浏览器不补助依然忽略那一个参数,最佳用null代替

3、url:任意有效的U中华VL,用于创新浏览器的地址栏,并不介意U福睿斯L是还是不是业已存在地址列表中。更主要的是,它不会重复加载页面。

四个点子的基本点区别正是:pushState()是在history栈中增多贰个新的条规,replaceState()是替换当前的记录值。要是您还对那个有吸引,就用部分演示来证实那个分裂。

假若大家有五个栈块,四个标志为1,另八个标记为2,你有第三个栈块,标识为3。当推行pushState()时,栈块3将被增加到已经存在的栈中,由此,栈就有3个块栈了。

一直以来的假设情景下,当实行replaceState()时,就要块2的货仓和停放块3。所以history的笔录条数不改变,也便是说,pushState()会让history的多少加1.

比较结实如下图:

澳门新萄京 2

 

到此,为了操纵浏览器的历史记录,我们忽略了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未有这种作为卡塔 尔(阿拉伯语:قطر‎。

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的上三个页面卡塔 尔(阿拉伯语:قطر‎

小结(ps:喜欢那八个字~^_^~)

HTML 5中的History API 对Web应用具备一点都不小的影响。为了更易于的开创有功效的、对SEO友好的单页面应用,它移除了对散列值的依附。

赞 1 收藏 评论

澳门新萄京 3

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京深切搜求HTML5的History,前生现代

上一篇:澳门新萄京:零散的JavaScript公用方法,Resig自己 下一篇:没有了
猜你喜欢
热门排行
精彩图文