• 售前

  • 售后

热门帖子
入门百科

深入探究HTML5的History API

[复制链接]
Mionsterv 显示全部楼层 发表于 2021-10-26 12:37:39 |阅读模式 打印 上一主题 下一主题
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复制内容到剪贴板
       
  • return !!(window.history && history.pushState);  
  别的,我发起参考一下这篇文章:Detect Support for Various HTML5 Features.(ps:后续会翻译)
  如果你是用的今世欣赏器,可以用下面的代码:


XML/HTML Code复制内容到剪贴板
       
  • 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:


XML/HTML Code复制内容到剪贴板
       
  • <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 <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f7cb547a6e640f0a&k=printing&k0=printing&kdi0=0&luki=5&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0f646e7a54cbf7&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5360%2Ehtml&urlid=0" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">printing</span></a></span> and typesetting industry.</p>      
  •             </div>      
  •         </div>      
  •     </div>      
  • </div>  
  JavaScript:
XML/HTML Code复制内容到剪贴板
       
  • <script type="text/<span style="width: auto; height: auto; float: none;" id="1_nwp"><a style="text-decoration: none;" mpid="1" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f7cb547a6e640f0a&k=javascript&k0=javascript&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0f646e7a54cbf7&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5360%2Ehtml&urlid=0" id="1_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">javascript</span></a></span>">      
  •     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).<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="text-decoration: none;" mpid="2" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f7cb547a6e640f0a&k=add&k0=add&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0f646e7a54cbf7&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5360%2Ehtml&urlid=0" id="2_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">add</span></a></span>Class('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( <span style="width: auto; height: auto; float: none;" id="3_nwp"><a style="text-decoration: none;" mpid="3" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f7cb547a6e640f0a&k=data&k0=data&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0f646e7a54cbf7&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5360%2Ehtml&urlid=0" id="3_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data</span></a></span> ) {      
  •                      
  •             // Updating Content on Page      
  •             $('#contentHolder').html(data);      
  •                      
  •             if(<span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f7cb547a6e640f0a&k=add&k0=add&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0f646e7a54cbf7&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5360%2Ehtml&urlid=0" id="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">add</span></a></span>Entry == true) {      
  •                 // Add History Entry using pushState      
  •                 history.pushState(null, null, url);      
  •             }      
  •                      
  •         });      
  •     }      
  • </script>  
  总结(ps:喜好这两个字~~~^_^~~~)
  HTML 5中的History API 对Web应用有着很大的影响。为了更容易的创建有用率的、对SEO友爱的单页面应用,它移除了对散列值的依赖。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作