通过 load() 加载内容后如何更改或附加到 URL答案

【问题标题】：How to Change or Append to URL After Content is Loaded via load()通过 load() 加载内容后如何更改或附加到 URL
【发布时间】：2018-10-13 21:15:27
【问题描述】：

我正在看一个由 Codyhouse (article | demo) 完成的演示，它使用 loadNewContent() 从另一个 HTML 文件中引入内容。一切功能完美，但是 URL 保持不变，始终为 /index.html。

我一直在调整 JS 以尝试使其页面 URL 与内容一起更新，但没有成功。我尝试过使用 replace()，但一直卡在一个循环中……或者删除了一些代码，它根本不起作用。

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

function loadNewContent(newSection) {
   //create a new section element and insert it into the DOM
   var section = $('<section class="cd-section '+newSection+'"></section>').appendTo($('main'));
   //load the new content from the proper html file
   section.load(newSection+'.html .cd-section > *', function(event){
      //add the .cd-selected to the new section element -> it will cover the old one
      section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
         //close navigation
         toggleNav(false);
      });
      section.prev('.cd-selected').removeClass('cd-selected');
   });

   $('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      //once the navigation is closed, remove the old section from the DOM
      section.prev('.cd-section').remove();
   });

   if( $('.no-csstransitions').length > 0 ) {
      //detect if browser supports transitions
      toggleNav(false);
      section.prev('.cd-section').remove();
   }

我熟悉 JS，但不是开发人员...所以非常感谢任何帮助！

【问题讨论】：

澄清一下，您希望在浏览器地址栏中更新页面 URL 吗？
是的，完全正确。现在，页面加载了新内容，但 url 保持不变。我希望它更新到加载的任何页面（about.html、project.html 等）

标签： javascript html url

【解决方案1】：

您可以使用 Javascript 的 history.pushState() 方法来执行此操作。它与旧版浏览器（

我建议在 //close navigation 评论之前添加 URL 操作，如下所示：

function loadNewContent(newSection) {
   //create a new section element and insert it into the DOM
   var section = $('<section class="cd-section '+newSection+'"></section>').appendTo($('main'));
   //load the new content from the proper html file
   section.load(newSection+'.html .cd-section > *', function(event){
      //add the .cd-selected to the new section element -> it will cover the old one
      section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
         // Update browser URL
         history.pushState(null, newSection, newSection+'.html');

         //close navigation
         toggleNav(false);
      });
      section.prev('.cd-selected').removeClass('cd-selected');
   });

   $('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      //once the navigation is closed, remove the old section from the DOM
      section.prev('.cd-section').remove();
   });

   if( $('.no-csstransitions').length > 0 ) {
      //detect if browser supports transitions
      toggleNav(false);
      section.prev('.cd-section').remove();
   }

重要提示：您的用户可能会复制/粘贴网址（与朋友分享 .etc）、记住它们，甚至使用浏览器中的后退/前进功能。您应该在代码中进行规定以查看当前 URL，并获取适当的内容。这只能解决问题的一半（另一半不在您的问题范围内）。

延伸阅读： Change URL without refresh the page

【讨论】：

使用此选项，如何为每个页面添加选项？例如，如果我有五个页面（index.html、page1.html、page2.html、page3.html 等），这个选项不会只是将页面 URL 更新为您添加的 pushState 代码中指定的任何内容更多？这就是我想让页面 URL 更新到加载的内容的确切原因，所以如果有人链接到它，它并不总是 index.html。
道歉 - 我希望你能更好地理解代码。文件名被传递到 newSection 参数内的函数中。您应该能够从那里访问所需的内容，并根据需要替换 URL 字符串。我会更新我的答案来帮助你。
@TylerHenson 这已经完成了。希望这现在更有意义。 :)
啊，我明白了！这正是我希望使用的，但我无法弄清楚语法/选项。这非常有效！非常感谢！！
@TylerHenson 没问题。查看演示的 Github 存储库 github.com/CodyHouse/3d-bold-navigation/blob/master/js/main.js 以获取有关其工作原理的更多示例。

【解决方案2】：

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

https://developer.mozilla.org/en-US/docs/Web/API/History_API

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

Modify the URL without reloading the page

【讨论】：