xml地图|网站地图|网站标签 [设为首页] [加入收藏]

深入探究HTML5的History,前生今世

来源:http://www.ccidsi.com 作者:最新解决方案 人气:176 发布时间:2019-05-02
摘要:HTML 五 History API的”前生当代” 2014/10/23 · HTML5 ·HTML5 原稿出处:tuts    译文出处:遗忘浅思的博客(@dwido)    澳门皇家娱乐平台,History是风趣的,不是啊?在头里的HTML版本中,大

HTML 五 History API的”前生当代”

2014/10/23 · HTML5 · HTML5

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

澳门皇家娱乐平台,History是风趣的,不是啊?在头里的HTML版本中,大家对浏览历史记录的操作至极轻便。我们得以来回使用能够利用的措施,但那正是全体我们能做的了。

唯独,利用HTML 伍的History API,大家得以越来越好的决定浏览器的历史记录了。比方:大家得以增多一条记下到历史记录的列表中,大概在并没有刷新时,能够革新鸿基土地资金财产址栏的UCRUISERL。

深切斟酌HTML5的History API,html5history

那篇作品首要介绍了深深研讨HTML伍的History API,尊崇讲述了HTML第55中学新的法子history.pushState()和history.replaceState(),要求的心上人能够参照下

History是有趣的,不是吗?在事先的HTML版本中,我们对浏览历史记录的操作尤其轻易。大家能够来回使用能够利用的格局,但那正是任何大家能做的了。

  不过,利用HTML 5的History API,大家能够越来越好的决定浏览器的历史记录了。举个例子:大家得以增加一条记下到历史记录的列表中,或许在并没有刷新时,可以立异鸿基土地资产址栏的UBMWX三L。
  为何介绍History API ?

  在那篇文章中,大家将领悟HTML 5中History API的源点。以前,我们平常使用散列值来更动页面内容,越发是那3个对页面尤其重大的情节。因为尚未刷新,所以对于单页面应用,退换其U凯雷德L是不容许的。别的,当你改动U宝马X3L的散列值值,它对浏览器的历史记录未有其他影响。

  然后,今后对于HTML 伍的History API来讲,这几个都是能够专擅达成的,可是出于单页面应用没须要运用散列值,它大概供给万分的耗费脚本。它也同意我们用1种对SEO友好的格局构建新应用。别的,它能压缩带宽,可是该怎么评释呢?

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

  那也意味着作者不可能不先在首页加载要求的财富。未来起初,页面仅仅加载须要的剧情。换句话说,应用并不是一初叶就加载了一切的始末,在乞求第二个使用内容时,才会被加载。

  注意,您须求试行一些劳务器端编码只提供部分能源,而不是完好的页面内容。
  浏览器辅助

  在写那篇小说的时候,各主流浏览器对History API的支撑是足够不错的,能够点击这里查看其支持情状,那几个链接会告诉您支持的浏览器,并利用在此之前,总有拔尖的执行来检查实验帮助的一定功效。

  为了用形成格局明显浏览器是或不是帮忙那些API,能够用上边包车型地铁1行代码核算:  

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

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

  别的,小编建议参考一下那篇小说:Detect Support for Various HTML五Features.(ps:后续会翻译)

  要是您是用的今世浏览器,能够用上边包车型大巴代码:  

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

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

  即便你的浏览器不扶助History API,能够选用history.js取代。
  使用History

  HTML 五提供了七个新点子:

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

  二种办法都同意大家抬高和立异历史记录,它们的劳作规律同样并且能够增加数量一样的参数。除了艺术之外,还有popstate事件。在后文中校介绍怎么利用和哪些时候利用popstate事件。

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

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

  二、title:以往大多数浏览器不扶助照旧忽视那么些参数,最棒用null替代

  三、url:率性有效的U猎豹CS六L,用于更新浏览器的地址栏,并不在乎U奥迪Q5L是不是曾经存在地址列表中。更要紧的是,它不会再一次加载页面。

  多个办法的入眼不一样就是:pushState()是在history栈中加多多少个新的条文,replaceState()是替换当前的记录值。假诺你还对这一个有吸引,就用一些演示来表明那些差别。

  借使大家有四个栈块,3个符号为一,另1个符号为二,你有第陆个栈块,标识为三。当施行pushState()时,栈块三将被加多到已经存在的栈中,因而,栈就有一个块栈了。

  一样的假若情景下,当实践replaceState()时,将要块二的仓库和停放块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:  

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 那篇文章首要介绍了深切探求HTML伍的History API,重视讲述了HTML5中新的措施history.pushState()和history.replaceSt...

怎么介绍History API ?

在那篇小说中,大家将明白HTML 5中History API的起点。从前,我们平日使用散列值来退换页面内容,尤其是那八个对页面尤其主要性的内容。因为未有刷新,所以对于单页面应用,改变其UGL450L是不或然的。其余,当你改造U卡宴L的散列值值,它对浏览器的历史记录未有其余影响。

下一场,未来对此HTML 伍的History API来讲,那个都是能够任性达成的,可是由于单页面应用没需求选用散列值,它大概须要至极的支付脚本。它也允许大家用1种对SEO友好的不贰秘籍确立新应用。其余,它能减小带宽,可是该怎么注明呢?

在小说中,小编将用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代替。

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:深入探究HTML5的History,前生今世

关键词: 68399皇家赌场 HTML5

最火资讯