您的位置: 首页  >  文章  >  如何理解HTML5的History API

如何理解HTML5的History API

分类: 文章 • 2022-07-25 10:09:48

这篇文章主要讲解了“如何理解HTML5的History API”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何理解HTML5的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.

　　比较结果如下图：
如何理解HTML5的History API

到此，为了控制浏览器的历史记录，我们忽略了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.                 <h2>Home!</h2>  

  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="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>  

  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="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>">  

  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="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');   

  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="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> ) {   

  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="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) {   

  32.                 // Add History Entry using pushState   

  33.                 history.pushState(null, null, url);   

  34.             }   

  35.                  

  36.         });   

  37.     }   

  38. </script>  

感谢各位的阅读，以上就是“如何理解HTML5的History API”的内容了，经过本文的学习后，相信大家对如何理解HTML5的History API这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐