在不重新加载页面的情况下更改HTML内容和URL

Question

我看到很多网站，例如gitHub，可以在不刷新页面的情况下更改其html内容和URL。
我找到了一种可能的方法，可以通过HTML History 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中看到的，即使您刷新页面，它也会显示与刷新前一样的页面。 我怎么做才能实现这一点呢？ 谢谢...

- AzeemHaider

---

如果您想在每次刷新时设置默认页面，则可以使用窗口的ajax onload，但这并不推荐，但如果您想要它，您有这个选项。 - Domain

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Cristik

Answer 1

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

- Temp O'rary

---

我认为 Routie 和 Director 适用于哈希 URL。但在这个问题中，它并不是哈希 URL。 - AzeemHaider

这也支持有或没有#哈希的历史记录和URL路由。 - Temp O'rary

Answer 2

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

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

有许多框架提供方便的URL路由，可以在不刷新页面的情况下自动更改内容。 Angular JS是我最喜欢的这种框架之一，它提供了很多其他功能中出色的routing能力。

- Charlie

---

问题不在于在不刷新页面的情况下更改内容和网址，而是当用户刷新页面时，它会显示与刷新之前相同的页面。 - AzeemHaider

您可以通过URL路由和状态监控来处理。 - Charlie

我在我的答案中提供了所需的链接。请查看Angular和$route的工作原理。一旦有了URL路由，您就可以监视状态。 - Charlie

Answer 3

你需要在页面的onload事件中检查/设置变量的值。

- EC DeV

Answer 4

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

- Neha