Javascript 在不重新加载页面的情况下更改html内容和url

我看到许多网站，如更改其html内容和

URL

，而不刷新页面。
我在

HTML历史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>  

 This is about page  

 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>  

home.html

 This is home page  

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

 This is about page  

 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>  

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

 This is about page  

 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>  

JAVASCRIPT

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

 This is about page  

 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>  

jQuery（'document'）.ready（函数（）{
jQuery（'.historyAPI'）。on（'click'，函数（e）{
e、 预防默认值（）；
var href=$（this.attr（'href'）；
//获取内容
getContent（href，true）；
jQuery（'.historyAPI'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
//添加popstate事件侦听器以处理浏览器后退按钮
window.addEventListener（“popstate”，函数（e）{
//使用e.State获取状态值
getContent（location.pathname，false）；
});
函数getContent（url、addEntry）{
$.get（url）
.完成（功能（数据）{
//更新页面上的内容
$（'#contentHolder'）.html（数据）；
如果（加法==真）{
//使用pushState添加历史记录条目
pushState（null，null，url）；
}
});
}

即使您在浏览器中返回或前进，此代码也可以正常工作。
但问题是，当您刷新页面时，它只显示正在刷新的文件。例如，如果刷新

about.html

，则只会显示以下内容：

这是about页面

不同于，它不能显示完整的页面。正如您在

gitHub

中所看到的，即使刷新页面，也会显示与刷新前相同的页面

我该怎么做

---

谢谢…

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

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

使用Basic或可在不刷新浏览器的情况下与服务器联系

---

有许多框架提供了方便的url路由，可以在不刷新页面的情况下自动更改内容。是我最喜欢的这样的框架，它提供了很多其他功能

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

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

我认为

Routie

和

Director

可以使用哈希URL。但有问题的是，这不是散列URL。这也支持历史记录和URL路由，无论有无#散列问题不是在不刷新页面的情况下更改内容和URL，但当用户刷新页面时，它将显示与刷新前相同的页面。您可以通过URL路由和状态监视进行处理。我在回答中提供了链接需要。请看Angular和$route是如何工作的。一旦url路由存在，您就可以监控状态。如果您想在每次刷新时设置默认页面，那么您可以使用ajax onload of window，但不建议这样做，但如果您想这样做，您可以选择可能的重复