Question

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

我一直在调整JS以尝试制作它，以便页面URL与内容一起更新，但这样做是不成功的。我已经尝试过使用replace（）但是仍然陷入困境......或者删除一些代码并且它根本不起作用。

关于我应该采取哪种方式来实现这项工作的任何想法？我希望它按原样运行，但是如果你点击“关于＆＃39;我希望页面网址为/about.html等。

＆＃13;

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();
   }

＆＃13;

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

Answer 1

您可以使用Javascript＆＃39; history.pushState()方法执行此操作。它与旧版浏览器（＆lt; IE9和其他版本）不兼容，但如果您需要支持旧版浏览器，则可以解决此问题。

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

＆＃13;

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();
   }

＆＃13;

重要说明：您的用户可能会复制/粘贴网址（与朋友分享.etc），记住它们甚至使用浏览器中的后退/转发功能。您应该在代码中设置条目以查看当前URL，并获取相应的内容。这只解决了问题的一半（另一半不在你的问题范围内）。

进一步阅读： Change URL without refresh the page

Answer 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

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

2 个答案: