使用 Javascript 的浏览器 URL，无需刷新页面和更改 div 内容答案

【问题标题】：browser URL using Javascript without refreshing the page and change div content使用 Javascript 的浏览器 URL，无需刷新页面和更改 div 内容
【发布时间】：2014-05-05 08:25:17
【问题描述】：

我想知道是否可以使用下面的代码同时更改 URL？

在 link 找到了一些更改 URL 的代码，但我无法让它们一起工作。

有没有可能或者有更好的（可行的）解决方案？

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TITLE</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">    
    $(function(){
    $('#profileMenu li a').on('click', function(e){
        e.preventDefault();
        var page_url=$(this).prop('href');
        $('#profileContent').load(page_url);
    });
});
</script>
  </head>
  <body>


<div id="profileMenu">
    <ul id="profileMenu">
        <li><a href="page1.asp">page 1</a></li>
       <li><a href="page2.asp">page 2</a></li>
    </ul>
</div>
<div id="profileContent"></div>
  </body>
</html>

【问题讨论】：

stackoverflow.com/help/how-to-ask
这可能不起作用，因为您有两个相同id 的实例。 jQuery 将忽略会破坏您的选择器的第二个实例。
你想加载另一个页面而不刷新页面..???或更改同一页面上的内容只是想更改一个网址？？
该示例链接使用history.pushstate() 而您的示例没有。
评估代码回答了一些问题。 <a> 标签与href 一起使用以更改 URL。 jQuery .on 事件处理程序侦听要单击的 <a> 标记。 URL 正在更改，可能是为了Deep Linking 功能。 <div> 元素 profileContent 中的内容旨在通过简写 jQuery Ajax 方法 .load 进行更改。不管两个相同的 id 有什么问题，当点击 <a> 标签时，该函数就会触发。所以我不认为这是问题所在。 .load 方法可能找不到 URL。 jsFiddle

标签： javascript jquery html url

【解决方案1】：

出于安全原因，这在纯 JavaScript 中过去是不可能的。但是，在 HTML5 中，您可以结合使用 pushState 方法和 onpopstate 事件。

基本上，您可以通过pushState 更改 URL 并将一些用户数据推送到历史记录而不刷新页面，并更改您的div 中的数据。如果您通过 BACK/FORWARD 按钮或 JS 浏览历史记录，onpopstate 事件将触发，提供您推送的用户数据并更改回 URL，以便您可以处理它以显示缓存页面。

这里描述了这种技术：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

更多关于onpopstate活动-https://developer.mozilla.org/en-US/docs/Web/API/Window.onpopstate

【讨论】：

@Sparky 是的，来自问题标题的 AFAIU，他想更改地址栏中的 URL 而无需重新加载页面。但是，查看提供的源代码，他似乎只是想要 AJAX。所以他的问题不是很好。