长远切磋HTML5的History,前生今世

HTML 5 History API的”前生今世”

2014/10/23 · HTML5 ·
HTML5

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

History是幽默的,不是吧?在事先的HTML版本中,大家对浏览历史记录的操作非凡简单。我们得以来回使用可以利用的不二法门,但那就是整个大家能做的了。

只是,利用HTML 5的History
API,我们得以更好的决定浏览器的历史记录了。例如:大家可以添加一条记下到历史记录的列表中,或者在并未刷新时,可以革新地址栏的URL。

深切切磋HTML5的History API,html5history

这篇文章主要介绍了深远探索HTML5的History
API,重点讲述了HTML5中新的办法history.pushState()和history.replaceState(),须求的敌人可以参考下

History是有趣的,不是吗?在事先的HTML版本中,大家对浏览历史记录的操作尤其有限。大家可以来回使用可以应用的形式,但那就是全方位我们能做的了。

  可是,利用HTML 5的History
API,大家可以更好的操纵浏览器的历史记录了。例如:我们得以添加一条记下到历史记录的列表中,或者在未曾刷新时,可以创新地址栏的URL。
  为何介绍History API ?

  在那篇作品中,我们将了解HTML 5中History
API的来源。在此在此以前,我们平时应用散列值来改变页面内容,更加是那个对页面尤其紧要的内容。因为没有刷新,所以对于单页面应用,改变其URL是不容许的。其它,当您转移URL的散列值值,它对浏览器的历史记录没有其余影响。

  然后,现在对于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:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是不是早已存在地址列表中。更主要的是,它不会再也加载页面。

  七个章程的关键不同就是: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.(在Web基特浏览器中,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_长远切磋HTML5的History,前生今世。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是有趣的,不是啊?在事先的HTML版本中,大家对浏览历史记录的操作非凡有限。我们可以来回使用可以采纳的章程,但那就是任何我们能做的了。

HTML 5 History API的”前生今世”,api前生今世

原文:An Introduction To The HTML5 History API

译文:关于HTML 5 History API 的介绍

译者:dwqs

History是幽默的,不是吧?在此前的HTML版本中,大家对浏览历史记录的操作万分简单。大家得以来回使用可以行使的章程,但那就是一体我们能做的了。

而是,利用HTML 5的History
API,大家得以更好的支配浏览器的历史记录了。例如:大家可以添加一条记下到历史记录的列表中,或者在尚未刷新时,可以革新地址栏的URL。

 

何以介绍History API ?

        在 那篇作品中,我们将明白HTML 5中History
API的来源于。在此从前,大家常常采用散列值来改变页面内容,越发是那多少个对页面越发主要性的始末。因为没有刷新,所以对于单页面应用,改变其URL是无法的。别的,当你改变URL的散列值值,它对浏览器的历史记录没有其他影响。

        然后,现在对此HTML 5的History
API来说,这么些都是可以随心所欲达成的,可是出于单页面应用没须要运用散列值,它或许须求十分的支付脚本。它也同意大家用一种对SEO友好的措施建立新应用。其余,它能减少带宽,可是该怎么表明呢?

        在篇章中,我将用History API开发一个单页应用来验证上述的题材。

       
那也意味着我不可能不先在首页加载须求的资源。现在初阶,页面仅仅加载须求的内容。换句话说,应用并不是一开端就加载了整套的情节,在呼吁第三个利用内容时,才会被加载。

注意,您必要执行一些劳动器端编码只提供一些资源,而不是一体化的页面内容。

 

浏览器接济

         在写那篇小说的时候,各主流浏览器对History
API的协理是非凡不易的,可以点击那里查看其帮衬处境,那一个链接会告诉你帮忙的浏览器,并运用以前,总有卓越的推行来检测帮衬的特定功用。

        
为了用变成方式确定浏览器是还是不是扶助那一个API,可以用上边的一条龙代码检验:

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

 

         别的,我指出参考一下那篇作品:Detect Support for Various HTML5
Features.(ps:后续会翻译)

         如果你是用的现世浏览器,能够用下边的代码:

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:任意有效的URL,用于创新浏览器的地址栏,并不在乎URL是还是不是已经存在地址列表中。更爱抚的是,它不会再度加载页面。

       
四个办法的显要不相同就是:pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。若是你还对那几个有迷惑,就用部分演示来证实那些不一致。

       
若是大家有五个栈块,一个符号为1,另一个符号为2,你有第八个栈块,标记为3。当执行pushState()时,栈块3将被添加到已经存在的栈中,因而,栈就有3个块栈了。

       
同样的只要情景下,当执行replaceState()时,将在块2的库房和停放块3。所以history的笔录条数不变,也就是说,pushState()会让history的多少加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:

<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:

<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友好的单页面应用,它移除了对散列值的信赖。

下一篇:你在博客收录集吗?

为啥介绍History API ?

在那篇小说中,我们将驾驭HTML 5中History
API的发源。此前,大家日常利用散列值来改变页面内容,更加是这一个对页面越发首要性的始末。因为从没刷新,所以对于单页面应用,改变其URL是不可能的。其它,当你改变URL的散列值值,它对浏览器的历史记录没有其余影响。

接下来,现在对此HTML 5的History
API来说,这么些都是可以自由完结的,可是由于单页面应用没需要接纳散列值,它可能需求额外的付出脚本。它也同意我们用一种对SEO友好的办法确立新应用。别的,它能压缩带宽,不过该怎么注明呢?

在小说中,我将用History API开发一个单页应用来注明上述的题目。

那也象征自己必须先在首页加载需要的资源。现在开端,页面仅仅加载要求的情节。换句话说,应用并不是一起先就加载了整整的始末,在伸手第一个利用内容时,才会被加载。

小心,您必要实践一些服务器端编码只提供部分资源,而不是全部的页面内容。

不过,利用HTML 5的History
API,大家可以更好的决定浏览器的历史记录了。例如:大家得以添加一条记下到历史记录的列表中,或者在并未刷新时,可以立异地址栏的URL。

javascript:historygo(-1) 网页已过期 怎解决

过期了。。。解决什么啊。。HTML5有个history的api,你能够去探望
 

浏览器帮助

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

 

html5 file api 上传文件

你可以到PHP100上边去咨询下 ~
在html5中文件上传的话是将所有文件转换成base64编码然后在将文件存储的
而你的PHP程序可能不读base64把
 

5 History API的”前生今世”,api前生今世
原文:An Introduction To The HTML5 History API 译文:关于HTML 5 History
API 的牵线 译者:dwqs History是有趣…

使用History

HTML 5提供了七个新办法:

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

二种方式都同意我们抬高和更新历史记录,它们的行事规律相同并且可以拉长数量一样的参数。除了艺术之外,还有popstate事件。在后文中校介绍怎么拔取和何时利用popstate事件。

pushState()和replaceState()参数一样,参数表明如下:

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

2、title:现在一大半浏览器不支持依然忽视这一个参数,最好用null代替

3、url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是不是早已存在地址列表中。更重视的是,它不会再也加载页面。

七个章程的要紧分歧就是: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.(在Web基特浏览器中,popstate事件在document的onload事件后触发,Firefox和IE没有那种表现)。

怎么介绍History API ?

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的上一个页面)

        在那篇小说中,咱们将精晓HTML 5中History
API的发源。在此此前,大家日常使用散列值来改变页面内容,特别是那一个对页面更加紧要性的始末。因为从没刷新,所以对于单页面应用,改变其URL是不容许的。其余,当你转移URL的散列值值,它对浏览器的历史记录没有其他影响。

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

HTML 5中的History API
对Web应用具有很大的熏陶。为了更易于的创导有功效的、对SEO友好的单页面应用,它移除了对散列值的信赖。

赞 1 收藏
评论

亚洲必赢官网 3

        然后,现在对此HTML 5的History
API来说,这个都是能够随心所欲完成的,不过出于单页面应用没必要选择散列值,它或许须要极度的支付脚本。它也同意大家用一种对SEO友好的点子建立新应用。其余,它能减弱带宽,不过该怎么讲明呢?

        在文章中,我将用History API开发一个单页应用来证实上述的题材。

       
那也意味着自己必须先在首页加载须求的资源。现在始于,页面仅仅加载必要的情节。换句话说,应用并不是一起首就加载了一切的始末,在伸手第四个使用内容时,才会被加载。

留意,您需求执行一些服务器端编码只提供部分资源,而不是完全的页面内容。

 

浏览器支持

         在写那篇文章的时候,各主流浏览器对History
API的辅助是不行不利的,可以点击那里查阅其协理意况,那一个链接会告诉您支持的浏览器,并动用以前,总有杰出的实践来检测接济的一定成效。

        
为了用变成格局确定浏览器是还是不是辅助那些API,可以用上面的一条龙代码检验:

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

 

         别的,我建议参考一下那篇作品:Detect Support for Various HTML5
Features.(译文:)

         假诺您是用的现世浏览器,可以用上边的代码:

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:任意有效的URL,用于立异浏览器的地址栏,并不在乎URL是不是曾经存在地址列表中。更关键的是,它不会再次加载页面。

       
八个办法的重大分裂就是:pushState()是在history栈中添加一个新的条条框框,replaceState()是替换当前的记录值。如若你还对那个有迷惑,就用一些演示来表达那一个不一样。

       
假使大家有几个栈块,一个标志为1,另一个符号为2,你有第八个栈块,标记为3。当执行pushState()时,栈块3将被添加到已经存在的栈中,由此,栈就有3个块栈了。

       
同样的若是情景下,当执行replaceState()时,将在块2的仓库和停放块3。所以history的笔录条数不变,也就是说,pushState()会让history的多寡加1.

        相比较结实如下图:

亚洲必赢官网 4

       
到此,为了控制浏览器的历史记录,大家忽略了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:

<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:

<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友好的单页面应用,它移除了对散列值的依靠。

网站地图xml地图