Файл JavaScript не загружается после перехода страницы с помощью barba.js

Question

У меня есть сайт со ссылкой. Когда я нажимаю на ссылку, я хочу плавного перехода на следующую страницу с помощью jQuery. Я получил элементы HTML внутри barba DOM, чтобы они исчезли. Но когда следующая страница пытается загрузить все НО JavaScript загружается.

Это мой код: (index.html)

   <div id="barba-wrapper" class="wrapper">
    <div class="barba-container">
        <div class="container">
            <span class="text1">Hey There!</span>
            <span class="text2">This is my portfolio!</span>
            <a id="homeLink" href="./home.html">Click me to continue</a>
        </div>
    </div>
</div>
<script>
    $('document').ready(function(){
        var transEffect = Barba.BaseTransition.extend({
            start: function(){
              this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
            },
            fadeInNewcontent: function(nc) {
              nc.hide();
              console.log('stuff should be hidden');
              var $el = $(this.newContainer);
              var _this = this;
              $(this.oldContainer).fadeOut(1000).promise().done(() => {
                nc.css('visibility', 'visible');
                nc.fadeIn(1000, function(){
                console.log('new content should fade in.');
                _this.done();
                })
              });
            }
        });
        Barba.Pjax.getTransition = function() {
          return transEffect;
        }
        Barba.Pjax.start();
    });
</script>

Я вижу журналы консоли в консоли, но JavaScript не загружается.

Это страница, которую я пытаюсь загрузить: (home.html)

<div id="barba-wrapper" class="wrapper">
    <div class="barba-container">
        <canvas></canvas>
        <script src="canvas.js"></script>
    </div>
</div>

Я не получаю ошибок вообще. Также я видел здесь вопрос с той же проблемой, что и у меня, но это было очень непонятно. (и пока не имеет ответов) Спасибо!

РЕДАКТИРОВАТЬ: Я решил разместить сайт, так как я все равно хочу сделать из него портфолио. Посмотрите ошибку для себя на этом сайте. Если вы обновите ошибку, она будет исправлена.

Answer 1

В Barba сценарии не оцениваются при загрузке нового контейнера. Это можно легко сделать с помощью событий.

Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container) {
    $(container).find('script').each(function (i, script) {
        var $script = $(script);
        $.ajax({
            url: $script.attr('src'),
            cache: true,
            dataType: 'script',
            success: function () {
                $script.trigger('load');
            }
        });
    });
});

Answer 2

Добавьте эту строку:

document.getElementsByTagName("head")[0].innerHTML += "<meta http-equiv=\"refresh\" content=\"1\">"; 

внутри функции ниже

fadeInNewcontent: function(nc) {

}