Barba.js (Pjax.js) и <head> Замена

Я использую barba.js для просмотра страниц без перезагрузки и создания плавной анимации.Barba.js (Pjax.js) и <head> Замена

Это example.

И короткий код из примера:

document.addEventListener("DOMContentLoaded", function() { 
 

 
    Barba.Pjax.init(); 
 
    Barba.Prefetch.init(); 
 

 
    var FadeTransition = Barba.BaseTransition.extend({ 
 
     start: function() { 
 
      Promise 
 
       .all([this.newContainerLoading, this.fadeOut()]) 
 
       .then(this.fadeIn.bind(this)); 
 
     }, 
 

 
     fadeOut: function() { 
 
      return $(this.oldContainer).animate({ 
 
       opacity: 0 
 
      }).promise(); 
 
     }, 
 

 
     fadeIn: function() { 
 
      var _this = this; 
 
      var $el = $(this.newContainer); 
 

 
      $(this.oldContainer).hide(); 
 

 
      $el.css({ 
 
       visibility: 'visible', 
 
       opacity: 0 
 
      }); 
 

 
      $el.animate({ 
 
       opacity: 1 
 
      }, 400, function() { 
 
       _this.done(); 
 
      }); 
 
     }, 
 

 
     newContainer: function() { 
 
      var $newPageHead = $('<head />').html(
 
       $.parseHTML(
 
        newPageRawHTML.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0], document, true 
 
       ) 
 
      ); 
 
     }, 
 

 
     done: function() { 
 
      var headTags = [ 
 
       "meta[name='keywords']", 
 
       "meta[name='description']", 
 
       "meta[property^='og']", 
 
       "meta[name^='twitter']", 
 
       "meta[itemprop]", 
 
       "link[itemprop]", 
 
       "link[rel='prev']", 
 
       "link[rel='next']", 
 
       "link[rel='canonical']" 
 
      ].join(','); 
 
      $('head').find(headTags).remove(); 
 
      $newPageHead.find(headTags).appendTo('head'); 
 
     } 
 
    }); 
 

 
    Barba.Pjax.getTransition = function() { 
 
     return FadeTransition; 
 
    }; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/0.0.10/barba.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<ul class="uMenuRoot"> 
 
    <li><a href="/"><span>Home</span></a></li> 
 
    <li><a href="/about.html"><span>About us</span></a></li> 
 
    <li><a href="/contacts.html"><span>Contacts</span></a></li> 
 
</ul> 
 

 
<main id="barba-wrapper"> 
 
    <section class="barba-container middle"> 
 
    Page content \t \t 
 
    </section> 
 
</main>

Интересно, можно ли перезагружать <head>? Другими словами, извлеките содержимое тега и замените уже загруженную структуру <head>.

Также было бы неплохо заменить не все стили и сценарии от <head>, а только некоторые данные. Например, разметка OpenGraph.

Подробнее об анимации, используемой в приведенном примере here.

На самом деле, речь идет об этой части кода:

newContainer: function() { 
    var $newPageHead = $('<head />').html(
     $.parseHTML(
      newPageRawHTML.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0], document, true 
     ) 
    ); 
}, 

done: function() { 
    var headTags = [ 
     "meta[name='keywords']", 
     "meta[name='description']", 
     "meta[property^='og']", 
     "meta[name^='twitter']", 
     "meta[itemprop]", 
     "link[itemprop]", 
     "link[rel='prev']", 
     "link[rel='next']", 
     "link[rel='canonical']" 
    ].join(','); 
    $('head').find(headTags).remove(); 
    $newPageHead.find(headTags).appendTo('head'); 
}

В этой части кода, я хочу, чтобы извлечь некоторые элементы из <head>, только от страницы, которая будет загружена. Затем удалите их после элементов анимации и замените их ранее полученными.

После окончания анимации выбранные элементы исчезают, но новые не добавляются. Что еще изменилось, и я не знаю. Вы можете изменить пример кода here.

источник

2017-01-22 Alexey Giryayev

Я автор Barba.js.

То, что вы просите уже обсуждались на github

Есть ли конкретная причина, почему вы хотите обновить содержимое голов? Боты/Crawler будут получать страницу напрямую, поэтому она всегда будет иметь правильную информацию о головке.

Если вы действительно хотите, чтобы обновить эти данные, кто-то сделал фрагмент кода: https://gist.github.com/grenouille220/58690c83d8c8d5c9308a35a240b34d69

источник

2017-01-22 17:03:47

Спасибо за вашу работу. Это действительно потрясающий сценарий. Что касается обсуждений и фрагментов, которые вы показали в ответ. Я попытался поместить этот код, и он не работает для меня. Вы можете работать с этим [demo] (https://plnkr.co/edit/MRgZ6oE5s17QugpST5so?p=preview). Я буду очень благодарен за вашу помощь. –

Там вы идете: https://plnkr.co/edit/wfgMT7kbvX3mhoGDggli?p=preview Достаточно было перейти на последнюю версию Barba.js и скопировать фрагмент. –

Это какая-то магия. Я делал то же самое много раз, и это не сработало. Большое спасибо! Последние вопросы ... можно перезагрузить или перезагрузить некоторые скрипты из '' или' '? И можно ли установить, какой элемент следует проверить с помощью параметра ссылки? Как я понял, теперь это все '' теги. В общем, можно сделать такой же контроль, как [здесь] (https://github.com/grenouille220/jquery-sail)? –

ответ

Смежные вопросы