Question

我看到很多网站，例如gitHub更改了它的html内容，URL没有刷新页面。
我在HTML Histroy API找到了一种可能的方法。
这是代码 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>

home.html

 This is home page

about.html

 This is about page

contact.html

 That one is content page

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>

即使您在浏览器中返回或转发，此代码也能正常运行但问题是，当您刷新页面时，它只显示正在刷新的文件。例如，如果您刷新about.html，则只会显示以下内容：This is the about page。

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

我该怎么做？

...谢谢

Answer 1

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

Answer 2

您可以随时更改DOM而无需加载页面。

使用基本XMLHTTPRequest或Ajax与服务器联系，而无需刷新浏览器。

有许多框架提供方便的网址路由，可以自动更改内容而无需刷新页面。 Angular JS是我最喜欢的这样的框架，在许多其他事情中提供了很好的routing能力。

Answer 3

您必须在页面的事件加载上检查/设置变量的值。

Answer 4

您的代码不起作用 - 当您点击特定链接时，页面会刷新。如果我错了，请纠正我。

无需重新加载页面即可更改html内容和网址

4 个答案: