Ответ 1

TL; DR

Я создал плункер для вас, взгляните и играйте с ним, пока вы можете. Вы будете узнать много из этого!

Я думаю, что вы слишком много делаете здесь, но не пробовали простейшие:

Основная цель состоит в том, чтобы не обновлять логотекст и меню, не обрезая обновление страницы или пока контент загружается со страницы на другую. Также состояние меню должно сохраняться со страницы на другую.

Если вы хотите сделать это, выполните несколько шагов:

• Создайте страницу "мастер", которую мы собираемся вызывать index.html с этого момента.
• Итак, наш индекс должен иметь статическую часть нашей страницы, например меню, логотип, нижний колонтитул и т.д.
• Затем наши "подстраницы" должны быть обрезаны (теги html, head, body, script, style), только контент, который должен отображаться на нашей главной странице).

• Теперь мы должны изменить наши ссылки, чтобы использовать AJAX вместо полного обновления:

  /* we add a 'click' event handler to our menu */
  document.getElementById('menu-menu-2').addEventListener('click', function(e) {
    var el = e.target;
  
    /* then, we see if the element that was clicked is a anchor */
    if (el.tagName === 'A') {
      /* we prevent the default functionality of the anchor (i.e redirect to the page) */
      e.preventDefault();
      /* we show our spinner, so the user can see that something is loading */
      spinner.classList.remove('hidden');
  
      /* and we call our AJAX function, passing a function as the callback */
      ajax(el.href, function(xhr) {
        /* we get our main div, and we replace its HTML to the response that came
           from the AJAX request */
        document.getElementById('main').innerHTML = xhr.responseText;
        /* since the request was finished, we hide our spinner again */
        spinner.classList.add('hidden');
      });
    }
  });
  

• Хорошо, теперь наши страницы уже работают через AJAX, а не перезагружают наш статический контент.

Но теперь мы видим, что у нас есть некоторые проблемы. Например, если кто-то попытается открыть одну из наших страниц напрямую через URL-адрес, он увидит незакрепленную страницу без меню/логотипа и т.д. Итак, что нам делать?

Теперь у нас есть еще несколько шагов:

• Имитировать, что наши ссылки эффективно переносятся между страницами с помощью API истории:

  /* inside our ajax callback, we save the fake-redirect we made into the pushState */
  ajax(el.href, function(xhr) {
    document.getElementById('main').innerHTML = xhr.responseText;
  
    /* save the new html, so when the user uses the back button, we can load it again */
    history.pushState({
      html: main.innerHTML,
      title: el.textContent + '| neuegrid'
    }, '', el.href);
  
    /* (...) */
  });
  
  /* and outside it, we add a 'popstate' event handler */
  window.addEventListener('popstate', function(e) {
    /* so, if we've saved the state before, we can restore it now */
    if (e.state) {
      document.getElementById('main').innerHTML = e.state.html;
      document.title = e.state.title;
    }
  });
  

• И нам нужно, чтобы при входе пользователя непосредственно на другую страницу, например about-us, мы перенаправляем его на index.html, а затем загружаем страницу about-us.

• Итак, мы создаем файл redirect.js, и мы ссылаемся на него во всех наших подстраниц:

  /* save the page that the user tried to load into the sessionStorage */
  sessionStorage.setItem('page', location.pathname);
  /* and them, we redirect him to our main page */
  location.replace('/');
  

• И затем, на нашей странице index.html, мы видим, есть ли какая-либо страница в sessionStorage, и мы ее загружаем, если есть, в противном случае мы загружаем нашу страницу home.

  var page = sessionStorage.getItem('page') || 'home';
  /* we look into the menu items, and find which has an href attribute 
     ending with the page URL we wanna load */
  document.querySelector('#menu-menu-2 > li > a[href$="' + page + '"').click();
  

И это, мы закончили. Посмотрите на плункер, который я вам сделал.

И играйте с ним, пока вы можете, так что вы многое узнаете от него.

Надеюсь, я мог бы помочь вам!:)

Примечание. Для справки это наша функция ajax:

function ajax(url, callback, method, params) {
  if (!method) method = 'GET';

  var xhr = new XMLHttpRequest();
  xhr.open(method, url);

  if (callback) xhr.addEventListener('load', function() {
    callback.call(this, xhr);
  });

  if (params) {
    params = Object.keys(params).map(function(key) {
      return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&');
    xhr.send(params);
  } else {
    xhr.send();
  }
}

Ответ 2

Из того, что вы сказали, я думаю, что, возможно, нашел решение, которое вы ищете, - вы хотите динамически загружать контент, сохраняя при этом логотип и навигацию нетронутыми? Если да, это может быть то, что вы ищете.

В этом примере страницы загружаются из div внутри страницы, но могут использоваться для загрузки другого URL-адреса или файла:

$('.viewport ul li a').on('click', function(e) {
   e.preventDefault();
   var link = this.hash.substring(1, this.hash.length);
   if($('.'+link).length) {
     $('.viewport span.body').html($('.'+link).html());
   }
});

Ответ 3

ИДЕТ С ПОМОЩЬЮ WORDPRESS

• demo: http://so.devilmaycode.it/how-to-keep-elements-non-refreshed/

выполните следующие простые шаги (возьмите в качестве примера тему "twentyfifteen" в папке шаблонов WP):

• edit single.php, page.php, index.php и все остальные страницы, имеющие функции get_header() и get_footer(), и замените их соответственно на следующий код:

ПРИМЕЧАНИЕ: это важно, потому что, если кто-то (например: поисковый движок) достигает ваших страниц непосредственно из ссылки, он по-прежнему полностью доступен и 100% работает. (полезно для SEO)

<?php 
//get_header()
if(!isset($_REQUEST['ajax'])){
  get_header();
}
?>

<!-- other code --->

<?php
//get_footer()
if(!isset($_REQUEST['ajax'])){
  get_footer();
}
?>

2. откройте header.php добавьте ниже код внутри раздела <head> в самом конце

   ---

    <script>
!(function($) {
    $(function() {
        $('.menu-item a, .widget-area a, .page_item a').on('click', function(e) {
            e.preventDefault();
            var href = this.href;
            var query = href ? (href + (!/\?/g.test(href) ? '?' : '&') + 'ajax=1') : window.location;

            /* IMPLEMENT SOME LOGIG HERE BEFORE PAGE LOAD */
            /* ex: kill instance of running plugins */

            $('#content').hide().empty().load(query, function() {

                /* IMPLEMENT SOME LOGIG HERE AFTER PAGE IS LOADED */
                /* ex: refresh or run a new plugin instance for this page */

                jQuery(this).show();
            });
        });
    });
})(jQuery);
    </script>

3. в файле header.php введите код ниже в конце файла, в 90% случаев он вам понадобится под навигацией. В этом случае мы уже имеем это в теме "twentyfifteen".

   NB:, скорее всего, у вас есть тег открытия <div id="content" class="site-content"> внутри файла header.php и закрывающий тег </div> в файле footer.php, это не имеет значения, вы можете оставьте его как есть.

   ---

<div id="content"></div>

• ПРИМЕЧАНИЕ: считают это доказательством концепции; он может работать так, как есть, но вы все равно должны его адаптировать в соответствии с вашими потребностями; вам может потребоваться:

  • Добавьте меню (если оно еще не установлено), перейдя под Appeareace > Menus > [check Primary Menu] > Save Menu, чтобы активировать меню. он протестирован и работает.
  • Возможно, вам захочется добавить какой-либо другой класс в функцию jQuery, например .widget-area a, чтобы ajax также отображал ссылки на виджеты.
  • Если вы используете плагины 3d-вечеринки, вам может потребоваться, чтобы все зависимости каждого плагина были загружены также на главной странице из где вы хотите, чтобы все отображалось без обновления содержимого.
  • вам может потребоваться проверить и убить те плагин для 3d-вечеринок перед загрузкой новой страницы и запустить или обновить > плагин, необходимый на загруженной странице.