Question

我有一个带有链接的网站。当我单击链接时，我希望使用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>

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

Answer 1

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

Answer 2

添加此行：

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

在下面的功能内

fadeInNewcontent: function(nc) {

}

使用barba.js进行页面转换后无法加载JavaScript文件

2 个答案: