更改 html 内容和 url，无需重新加载页面

Question

我看到许多网站（例如gitHub）更改了 html 内容并且URL没有刷新页面。
我找到了一种可能的方法来做到这一点HTML Histroy API。
这是代码。
超文本标记语言

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

首页.html

 This is home page  

关于.html

 This is about page  

联系方式.html

 That one is content page  

脚本语言

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

即使您在浏览器中后退或前进，此代码也可以正常工作。
但问题是，当您刷新页面时，它只显示正在刷新的文件。例如，如果刷新，about.html则仅显示以下内容：This is the about page。

与gitHub不同， 它无法显示完整的页面。正如您在 中看到的gitHub，即使您刷新页面，它也会显示与刷新之前相同的页面。

我怎样才能做到这一点？

谢谢...

Answer 1

您可以使用Routie或Director来进行路由。在它们的回调函数中编写代码来更新 HTML 页面的部分，为此您可以使用Fragment.js。