Javascript 如何在通过load（）加载内容后更改或附加到URL

我正在看Codyhouse（|）的一个演示，它使用loadNewContent（）从另一个HTML文件引入内容。所有功能都很完美，但是URL保持不变，始终为/index.html

我一直在调整JS，试图让页面URL随着内容一起更新，但没有成功。我尝试过使用replace（），但一直陷入循环中。。。或者删除一些代码，但它根本不起作用

关于我应该走哪条路线来完成这项工作，有什么想法吗？我希望它按原样运行，但如果单击“关于”，我希望页面URL为/About.html，等等

函数loadNewContent（newSection）{
//创建一个新的section元素并将其插入DOM
变量节=$（''）.appendTo（$（'main'）；
//从正确的html文件加载新内容
加载（newSection+'.html.cd节>*'，函数（事件）{
//将所选的.cd添加到新的节元素->它将覆盖旧的节元素
section.addClass（'cd-selected'）.one（'WebKittTransitionEnd OTTransitionEnd OTTransitionEnd OTTransitionEnd msTransitionEnd transitionend transitionend msTransitionEnd transitionend'，函数（）{
//近距离导航
toggleNav（假）；
});
section.prev（'.cd-selected'）.removeClass（'cd-selected'）；
});
$（'main'）.one（'WebKittTransitionEnd otTransitionEnd otTransitionEnd otTransitionEnd msTransitionEnd transitionend transitionend msTransitionEnd transitionend'，function（）{
//关闭导航后，从DOM中删除旧部分
section.prev（'.cd section'）.remove（）；
});
如果（$（'.no.CsStransions'）。长度>0）{
//检测浏览器是否支持转换
toggleNav（假）；
section.prev（'.cd section'）.remove（）；
}

在网站上更改页面的典型方式是请求特定的路由并从服务器获取内容，这意味着您请求路由“/index”并获得主页，然后当您按下“About”按钮时，您请求另一个来自路由的页面“/About”并包含请求的页面内容。 您正在使用JavaScript在客户端加载内容，而不是向服务器发出请求。 如果您还想更改保持js功能的URL，我建议您操作浏览器的历史记录：

通过这种方式，您既可以加载内容，也可以更改浏览器历史记录更改URL，还可以添加“返回”到上一页的可能性。 再看看这个答案：

---

您可以使用Javascript的

history.pushState（）

方法来实现这一点。 它与较旧的浏览器（ 我建议在

//关闭导航

注释之前添加URL操作，如下所示：

函数loadNewContent（newSection）{
//创建一个新的section元素并将其插入DOM
变量节=$（''）.appendTo（$（'main'）；
//从正确的html文件加载新内容
加载（newSection+'.html.cd节>*'，函数（事件）{
//将所选的.cd添加到新的节元素->它将覆盖旧的节元素
section.addClass（'cd-selected'）.one（'WebKittTransitionEnd OTTransitionEnd OTTransitionEnd OTTransitionEnd msTransitionEnd transitionend transitionend msTransitionEnd transitionend'，函数（）{
//更新浏览器URL
pushState（null，newSection，newSection+'.html'）；
//近距离导航
toggleNav（假）；
});
section.prev（'.cd-selected'）.removeClass（'cd-selected'）；
});
$（'main'）.one（'WebKittTransitionEnd otTransitionEnd otTransitionEnd otTransitionEnd msTransitionEnd transitionend transitionend msTransitionEnd transitionend'，function（）{
//关闭导航后，从DOM中删除旧部分
section.prev（'.cd section'）.remove（）；
});
如果（$（'.no.CsStransions'）。长度>0）{
//检测浏览器是否支持转换
toggleNav（假）；
section.prev（'.cd section'）.remove（）；
}

为了澄清，您希望在浏览器地址栏中更新页面URL吗？是的，没错。现在，页面加载新内容，但URL保持不变。我希望它更新到加载的任何页面（about.html、project.html等）。使用此选项，如何为每个页面添加选项？例如，如果我有五个页面（index.html、page1.html、page2.html、page3.html等），此选项是否会将页面URL更新为您在上面添加的pushState代码中指定的内容？这正是我希望将页面URL更新为加载的内容的原因，因此，如果有人链接到它，它并不总是index.html。抱歉-我希望您能更好地理解代码。filename被传递到

newSection

参数内的函数中。您应该能够从那里访问所需内容，并根据需要替换URL字符串。我将更新我的答案以帮助您。@TylerHenson这已经完成。希望现在这有点意义。：）啊哈，我明白了！！这正是我希望使用的，但我无法理解语法/选项。这非常有效！！！非常感谢！！@TylerHenson没问题。请查看演示的Github存储库，以进一步了解其工作原理。