Barba.js (Pjax.js) 和 <head> 替换

Question

我使用 barba.js 在不重新加载的情况下浏览页面并创建流畅的动画。

这是一个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>

请问是否可以重载<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.

Answer 1

我是 Barba.js 的作者。

你问的问题已经在 github

上讨论过了

有什么具体原因要更新头部内容吗？ Bots/Crawler 将直接获取一个页面，因此它始终具有正确的头部信息。

如果你真的想更新这些信息，有人做了一个代码片段： https://gist.github.com/grenouille220/58690c83d8c8d5c9308a35a240b34d69

Barba.js (Pjax.js) 和 <head> 替换

Barba.js (Pjax.js) and <head> replacing

javascript

jquery

pjax