Как изменить или добавить URL после загрузки контента с помощью load ()

Question

Я смотрю демонстрацию, сделанную 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, но не разработчик ... так что любая помощь с благодарностью приветствуется !!

Answer 1

Вы можете сделать это, используя метод history.pushState() Javascript. Он не совместим со старыми браузерами (

Я бы предложил добавить манипулирование URL-адресом непосредственно перед комментарием //close navigation, например:

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

Важное примечание: Ваши пользователи, скорее всего, будут копировать / вставлять URL-адреса (делиться ими с друзьями и т. Д.), Запоминать их или даже использовать функцию возврата / пересылки в браузере. Вы должны предусмотреть в своем коде условия для просмотра текущего URL-адреса и получения соответствующего содержимого. Это решает только одну половину проблемы (другая половина выходит за рамки вашего вопроса).

Дополнительная информация: Изменить URL-адрес без обновления страницы

Answer 2

Типичный способ изменить страницу на веб-сайте - сделать запрос на конкретный маршрут и получить содержимое обратно с сервера. Это означает, что вы запрашиваете маршрут "/ index" и получаете домашнюю страницу, а затем нажимаете кнопку Кнопка «О программе», которую вы запрашиваете для другой страницы, идущей по маршруту, «/ about» с содержанием запрашиваемой страницы. Вы загружаете контент на стороне клиента, используя JavaScript, а не отправляете запрос на сервер. Если вы также хотите изменить URL, сохраняя функцию js, я предлагаю вам манипулировать историей браузера:

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

Таким образом, вы можете как загружать контент, так и изменять историю браузера, изменяя URL, а также добавляя возможность «Вернуться» на предыдущую страницу. Посмотрите также на этот ответ:

Изменить URL без перезагрузки страницы