时间戳

首页 > 解决方案 > 使用 barba.js 进行页面转换后 JavaScript 文件不加载

javascript - 使用 barba.js 进行页面转换后 JavaScript 文件不加载

问题描述

我有一个带有链接的网站。当我单击链接时，我希望使用 jQuery 将页面平滑过渡到下一页。我让 barba DOM 中的 HTML 元素淡出。但是当下一页尝试加载时，除了 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>

我没有任何错误。我也在这里看到了一个与我的问题相同的问题，但很不清楚。（到目前为止还没有任何答案）谢谢！

标签： javascripthtmlajaxbarbajs

解决方案

在 Barba 中，加载新容器时不会评估脚本。可以使用Events轻松完成。

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

推荐阅读