Barba.jS 中的页面转换后脚本未加载

Question

所以我有一个索引文件，其中包含很少的 js 文件，例如 Gsap 和 Barba JS。 但是我有一个内页，其中包含一些额外的 js 文件，例如 locomotive.js 和 OWLcarousel.js，请注意这两个 Js 文件（locomotive.js 和 OWLcarousel.js）不包含在索引页面中，因为它们不是必需的。 问题是内页在完成索引页面转换后打开，但没有加载这两个 JS 文件（locomotive.js 和 OWLcarousel.js）。 结果，机车滚动和 OWL 旋转木马都不起作用。 但是，如果我刷新一次内页，那么这两个 Js 文件（locomotive.js 和 OWLcarousel.js）正在加载并且一切正常。 那么如何在 Barba.Js 中加载内页的 JS 文件呢？

更新：我创建了一个最小的演示，如果单击主页上的标题文本并导航到内部，您可以看到内部页面没有加载机车的 JS 和 CSS 以及 OWL 轮播。 但是如果刷新页面，那么机车和猫头鹰旋转木马在内页都可以正常工作。 如何解决这个问题？ 我已将建议的更改添加到 JS 文件（ https://bootstrap-awesome.com/barba-test1f/js/main-test.js ）演示链接： https://bootstrap-awesome.com/barba-test1f/指数测试。html

因此，我尝试以以下相同的格式加载其他 JS 文件，但没有任何反应。 有人可以指导我吗？

barba.init({
  views: [{
        namespace: 'home',
        beforeEnter({ next }) {

        // load your script
        let script = document.createElement('script');
        script.src = '<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>'; 
script.src = '<script src="js/owl/owl.carousel.js"></script>';
        next.container.appendChild(script);
        }, 
    }],

Answer 1

我会尝试这样的事情，在数组中添加所需的脚本，然后遍历每个脚本并构建<script src="..."></script>字符串和 append 到next容器。

 barba.init({ views: [{ namespace: 'home', beforeEnter({ next }) { // Script URLs to load let pageScriptSrcs = [ 'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js', 'js/owl/owl.carousel.js' ] pageScriptSrcs.forEach(scriptSrc => { let script = '<script src="' + scriptSrc + '"><\/script>'; console.log(script); next.container.appendChild(script); }) }, }], })

Answer 2

以下是我尝试过但仍然无法正常工作的方法。 另外，如何加载机车外部CSS？

JS：bootstrap-awesome.com/barba-test1f/js/main-test.js

演示： https://bootstrap-awesome.com/barba-test1f/index-test.html

views: [{
    namespace: 'home',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/custom-scroll.js',
        'js/owl/owl.carousel.js',
        'js/owl/owl-custom.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    }
    },
    {
    namespace: 'projdetailpage',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/custom-scroll.js',
        'js/owl/owl.carousel.js',
        'js/owl/owl-custom.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    }

  }],