使用barba.js进行页面转换后无法加载JavaScript文件 [英] JavaScript file doesn't load after page transition with barba.js

问题描述

我有一个带有链接的网站.当我单击链接时，我希望使用jQuery将页面平滑过渡到下一页.我得到了barba DOM中的HTML元素淡出.但是，当下一页尝试加载时，所有JavaScript都将加载.

I have a website with a link. When I click the link I want a smooth page transition to the next page using jQuery. I got the the HTML elements inside the barba DOM to fade out. But when the next page tries to load, all BUT the JavaScript loads.

这是我的代码: (index.html)

This is my code: (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无法加载.

I can see the the console logs in the console but JavaScript doesn't load.

这是我要加载的页面: (home.html)

This is the page I'm trying to load: (home.html)

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

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

I get no errors whatsoever. Also I have seen a question on here with the same problem as mine, but it was very unclear. (and does not have any answers so far) Thanks!

推荐答案

在Barba中，加载新容器时不会评估脚本.使用事件即可轻松完成.

In Barba, scripts don't evaluated when loading a new container. It can be done easily using 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');
            }
        });
    });
});

这篇关于使用barba.js进行页面转换后无法加载JavaScript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！