Question

我使用barba.js浏览页面而不重新加载并创建平滑的动画。

示例中的简短代码：

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）并取代

1 个答案: