您的位置:澳门新葡8455最新网站 > Web前端 > 前生现代,深远商量HTML5的History

前生现代,深远商量HTML5的History

发布时间:2019-12-02 18:02编辑:Web前端浏览(97)

    HTML 5 History API的”前生今世”

    2014/10/23 · HTML5 · HTML5

    初藳出处: tuts+   译文出处:忘记浅思的博客(@dwido)   

    History是风趣的,不是啊?在头里的HTML版本中,大家对浏览历史记录的操作非常轻易。大家得以来回使用可以运用的议程,但那正是一切大家能做的了。

    不过,利用HTML 5的History API,大家能够更加好的调控浏览器的历史记录了。比方:大家得以增加一条记下到历史记录的列表中,大概在未有刷新时,能够立异鸿集散地产址栏的U奥迪Q7L。

    浓烈查究HTML5的History API,html5history

    那篇作品重要介绍了深入研商HTML5的History API,入眼呈报了HTML5中新的办法history.pushState(卡塔尔(英语:State of Qatar)和history.replaceState(卡塔尔(قطر‎,必要的相爱的人能够参见下

    History是风趣的,不是啊?在事情未发生前的HTML版本中,大家对浏览历史记录的操作特别轻巧。我们得以来回使用能够动用的形式,但那便是全部大家能做的了。

      不过,利用HTML 5的History API,大家能够越来越好的支配浏览器的历史记录了。举个例子:大家得以增加一条记下到历史记录的列表中,可能在尚未刷新时,能够立异乡址栏的URAV4L。
      为何介绍History API ?

      在这里篇文章中,大家将理解HTML 5中History API的来源于。早先,大家平日使用散列值来退换页面内容,特别是那多少个对页面极度首要的内容。因为未有刷新,所以对于单页面应用,改换其UTiggoL是不容许的。其它,当你退换USportageL的散列值值,它对浏览器的历史记录未有其余影响。

      然后,未来对于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:大肆有效的UGL450L,用于更新浏览器的地址栏,并不留意UXC90L是还是不是曾经存在地址列表中。更注重的是,它不会再次加载页面。

      五个方式的重大差别便是: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(卡塔尔(英语:State of Qatar)和history.replaceSt...

    为什么介绍History API ?

    在这里篇小说中,大家将领会HTML 5中History API的源于。以前,大家日常使用散列值来更换页面内容,极度是那么些对页面特别重大的剧情。因为还未有刷新,所以对于单页面应用,改造其UTiguanL是不也许的。别的,当你修改UOdysseyL的散列值值,它对浏览器的历史记录未有别的影响。

    然后,未来对于HTML 5的History API来讲,这个都以足以自由落成的,可是由于单页面应用没供给运用散列值,它恐怕须求额外的花销脚本。它也允许大家用风华正茂种对SEO友好的艺术确立新利用。此外,它能压缩带宽,然而该怎么申明呢?

    在小说中,笔者将用History API开辟三个单页应用来评释上述的标题。

    那也代表自己必需先在首页加载必要的财富。今后始发,页面仅仅加载供给的从头到尾的经过。换句话说,应用实际不是生龙活虎初始就加载了全副的内容,在乞请第1个应用内容时,才会被加载。

    留心,您须要试行一些劳动器端编码只提供一些能源,并不是完好的页面内容。

    浏览器支持

    在写那篇文章的时候,各主流浏览器对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代替。

    使用History

    HTML 5提供了四个新措施:

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

    二种办法都同意我们增添和立异历史记录,它们的行事规律相像并且能够增加数量相仿的参数。除了艺术之外,还恐怕有popstate事件。在后文上校介绍怎么选取和怎么时候利用popstate事件。

    pushState(卡塔尔国和replaceState(卡塔尔参数同样,参数表达如下:

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

    2、title:未来超过半数浏览器不援助依然忽视这些参数,最佳用null代替

    3、url:放肆有效的U路虎极光L,用于更新浏览器的地址栏,并无所谓UTiggoL是不是早就存在地址列表中。更主要的是,它不会再度加载页面。

    五个措施的机要分化正是:pushState(卡塔尔是在history栈中增加叁个新的条规,replaceState(卡塔尔国是替换当前的记录值。假若你还对这么些有吸引,就用部分演示来验证这么些区别。

    只要大家有五个栈块,贰个标志为1,另壹个标志为2,你有第多个栈块,标志为3。当推行pushState(卡塔尔(英语:State of Qatar)时,栈块3将被增添到已经存在的栈中,由此,栈就有3个块栈了。

    同等的假诺情景下,当实施replaceState(卡塔尔时,将要块2的库房和停放块3。所以history的记录条数不改变,也正是说,pushState(卡塔尔国会让history的数量加1.

    正如结实如下图:

    图片 2

     

    到此,为了垄断(monopoly卡塔尔浏览器的历史记录,我们忽视了pushState(卡塔尔和replaceState(卡塔尔国的事件。可是假诺浏览器计算了众多的不良记录,客商可能会被重定向到这几个页面,恐怕也不会。在这里种状态下,当客户接收浏览器的演化和落后导航开关时就能够产生意料之外的难题。

    尽管当大家选拔pushState(卡塔尔(英语:State of Qatar)和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.(在Web基特浏览器中,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

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:前生现代,深远商量HTML5的History

    关键词:

上一篇:没有了

下一篇:没有了