Barba.js（Pjax.js）和 <head> 更换

Question

I use barba.js to go through the pages without reloading and create a smooth animation. 我使用barba.js来浏览页面而不重新加载并创建一个流畅的动画。

This is an example . 这是一个例子。

And a short code from the 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 </section> </main>

I wonder whether it is possible to reload <head> ? 我想知道是否有可能重新加载<head> ？ Other words, extract the contents of the tag and replace already loaded <head> structure. 换句话说，提取标签的内容并替换已加载的<head>结构。

Also, It would be nice to replace not all the styles and scripts from <head> , but only some of the data. 另外，从<head>替换并非所有样式和脚本都会很好，但只能替换部分数据。 For example, OpenGraph markup. 例如，OpenGraph标记。

Read more about the animation used in the example described here . 阅读有关此处描述的示例中使用的动画的更多信息。

Actually, we are talking about this part of the code: 实际上，我们正在谈论代码的这一部分：

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

In this part of the code I want to extract some items from the <head> , just from the page to be loaded. 在这部分代码中，我想从<head>提取一些项目，只是从要加载的页面中提取。 Then remove the same after the animation elements and replace them with previously received. 然后在动画元素后删除它们并用之前收到的替换它们。

After the end of the animation, the selected elements disappear, but new ones are not added. 动画结束后，所选元素消失，但不添加新元素。 What else has changed and I do not know. 还有什么改变，我不知道。 You can modify the sample code here . 您可以在此处修改示例代码。

Answer 1

I'm the author of Barba.js. 我是Barba.js的作者。

What you are asking has been already discussed on github 你在问什么已经在github上讨论了

Is there a specific reason why you want to update the content of the head? 是否有特定原因要更新磁头的内容？ Bots/Crawler will fetch a page directly, so it will always have the correct head information. Bots / Crawler将直接获取页面，因此它将始终具有正确的头部信息。

If you really want to update those info, someone made a snippet code: https://gist.github.com/grenouille220/58690c83d8c8d5c9308a35a240b34d69 如果你真的想更新这些信息，有人制作了一个代码段： https ： //gist.github.com/grenouille220/58690c83d8c8d5c9308a35a240b34d69

Barba.js（Pjax.js）和 <head> 更换

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-01-22 17:03:47

Barba.js（Pjax.js）和 <head> 更换

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-01-22 17:03:47

解决方案1
3 已采纳 2017-01-22 17:03:47